contenteditable可編輯區(qū)域設(shè)置換行實(shí)現(xiàn)技巧實(shí)例
contenteditable 在需要自定義插入換行符 br
1.方式一,添加換行符 br 進(jìn)行換行
其中在末尾換行時(shí)需要增加兩個(gè)br,如不增加則第一次不會產(chǎn)生換行
<div class="inputContent scroll" contenteditable="true" @keydown="inputContent_keydown" ></div>
function inputContent_keydown(e) { // 1.快捷鍵判斷 回車加ctrl if( e.keyCode==13 && e.ctrlKey) { if (document.selection) {//IE9以下 document.selection.createRange().pasteHTML(content); } else { let doc_fragment = document.createDocumentFragment(); // 創(chuàng)建br let new_ele = document.createElement('br'); doc_fragment.appendChild(new_ele); // 獲取當(dāng)前選擇 let range = window.getSelection().getRangeAt(0); range.deleteContents(); // 判斷是否是最后一個(gè)元素如果是多加一個(gè) if (!hasNextSibling(range.endContainer) && range.startOffset == range.startContainer.length) { let extra_break = document.createElement('br'); doc_fragment.appendChild(extra_break); } range.insertNode(doc_fragment); //創(chuàng)建新范圍 range = document.createRange(); range.setStartAfter(new_ele); range.collapse(true); //插入 let sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } } } function hasNextSibling(node) { if (node.nextElementSibling) { return true; } while (node.nextSibling) { node = node.nextSibling; if (node.length > 0) { return true; } } return false; }
2.方式二,使用 document.execCommand
(已廢棄,但大部分瀏覽器仍然支持)document.execCommand('insertLineBreak')
以上就是contenteditable 可編輯區(qū)域設(shè)置換行的詳細(xì)內(nèi)容,更多關(guān)于contenteditable 可編輯區(qū)域設(shè)置換行的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Bootstrap入門書籍之(五)導(dǎo)航條、分頁導(dǎo)航
這篇文章主要介紹了Bootstrap入門書籍之(五)導(dǎo)航條、分頁導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2016-02-02微信小程序如何加載數(shù)據(jù)庫真實(shí)數(shù)據(jù)的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序如何加載數(shù)據(jù)庫真實(shí)數(shù)據(jù)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03使用JavaScript實(shí)現(xiàn)圖片的自動(dòng)輪播
在網(wǎng)站開發(fā)中,經(jīng)常會遇到需要展示多張圖片并自動(dòng)切換的需求,這就需要使用JavaScript來實(shí)現(xiàn)圖片的自動(dòng)輪播功能,本文將通過一個(gè)簡單的例子,演示如何用JavaScript實(shí)現(xiàn)圖片的自動(dòng)輪播,感興趣的同學(xué)可以自己動(dòng)手試一試2023-09-09JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(五):經(jīng)典KMP算法
這篇文章主要介紹了JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(五):經(jīng)典KMP算法,本文詳解了KMP算法的方方面在,需要的朋友可以參考下2015-06-06JavaScript電話號碼格式化的多種實(shí)現(xiàn)方式
本文希望通過一道簡單的題目,讓剛接觸JavaScript的新手們了解一個(gè)合格的前端程序員需要具備哪些素質(zhì),文章給大家介紹了JavaScript電話號碼格式化的多種實(shí)現(xiàn)方式,感興趣的小伙伴跟著小編一起來看看吧2024-11-11