contenteditable可編輯區(qū)域設(shè)置換行實(shí)現(xiàn)技巧實(shí)例
contenteditable 在需要自定義插入換行符 br
1.方式一,添加換行符 br 進(jìn)行換行
其中在末尾換行時(shí)需要增加兩個(gè)br,如不增加則第一次不會(huì)產(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è)置換行的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
javascript使用閉包模擬對(duì)象的私有屬性和方法
本文給大家簡(jiǎn)單介紹了在一個(gè)項(xiàng)目中涉及到的javascript使用閉包模擬對(duì)象的私有屬性和方法,這里記錄下來(lái),分享給大家。2016-10-10
解讀請(qǐng)求方式Method和請(qǐng)求類型Content-Type
HTTP請(qǐng)求中,Content-Type頭部用于指定請(qǐng)求體或響應(yīng)體的類型,常見(jiàn)的有application/x-www-form-urlencoded、multipart/form-data、application/json、text/plain、application/xml等,常用請(qǐng)求方式包括Get、Post、Put、Delete2024-09-09
Bootstrap入門(mén)書(shū)籍之(五)導(dǎo)航條、分頁(yè)導(dǎo)航
這篇文章主要介紹了Bootstrap入門(mén)書(shū)籍之(五)導(dǎo)航條、分頁(yè)導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2016-02-02
微信小程序如何加載數(shù)據(jù)庫(kù)真實(shí)數(shù)據(jù)的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序如何加載數(shù)據(jù)庫(kù)真實(shí)數(shù)據(jù)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
使用JavaScript實(shí)現(xiàn)圖片的自動(dòng)輪播
在網(wǎng)站開(kāi)發(fā)中,經(jīng)常會(huì)遇到需要展示多張圖片并自動(dòng)切換的需求,這就需要使用JavaScript來(lái)實(shí)現(xiàn)圖片的自動(dòng)輪播功能,本文將通過(guò)一個(gè)簡(jiǎn)單的例子,演示如何用JavaScript實(shí)現(xiàn)圖片的自動(dòng)輪播,感興趣的同學(xué)可以自己動(dòng)手試一試2023-09-09
JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(五):經(jīng)典KMP算法
這篇文章主要介紹了JavaScript中數(shù)據(jù)結(jié)構(gòu)與算法(五):經(jīng)典KMP算法,本文詳解了KMP算法的方方面在,需要的朋友可以參考下2015-06-06
JS日期和時(shí)間選擇控件升級(jí)版(自寫(xiě))
鑒于網(wǎng)上找到的幾個(gè)日期選擇程序有些問(wèn)題,遂著手重寫(xiě)一個(gè)程序,添加了時(shí)間選擇功能,截圖及源碼如下,有需要的朋友可以參考下2013-08-08
JavaScript電話號(hào)碼格式化的多種實(shí)現(xiàn)方式
本文希望通過(guò)一道簡(jiǎn)單的題目,讓剛接觸JavaScript的新手們了解一個(gè)合格的前端程序員需要具備哪些素質(zhì),文章給大家介紹了JavaScript電話號(hào)碼格式化的多種實(shí)現(xiàn)方式,感興趣的小伙伴跟著小編一起來(lái)看看吧2024-11-11

