contenteditable可编辑区域设置换行实现技巧实例
作者：TangJang
这篇文章主要为大家介绍了contenteditable可编辑区域设置换行实现技巧实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
contenteditable 在需要自定义插入换行符 br
1.方式一，添加换行符 br 进行换行
其中在末尾换行时需要增加两个br，如不增加则第一次不会产生换行
<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();
// 创建br
let new_ele = document.createElement('br');
doc_fragment.appendChild(new_ele);
// 获取当前选择
let range = window.getSelection().getRangeAt(0);
range.deleteContents();
// 判断是否是最后一个元素如果是多加一个
if (!hasNextSibling(range.endContainer) && range.startOffset == range.startContainer.length) {
let extra_break = document.createElement('br');
doc_fragment.appendChild(extra_break);
}
range.insertNode(doc_fragment);
//创建新范围
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 可编辑区域设置换行的详细内容，更多关于contenteditable 可编辑区域设置换行的资料请关注脚本之家其它相关文章！