js添加html换行符,javascript – 在contenteditable div中的输入键上插入换行符

我试图插入一个换行符,而不是当我在一个contenteditable div中输入时浏览器想要插入的内容.

我当前的代码看起来像这样：

if (e.which === 13) {

e.stopPropagation();

e.preventDefault();

var selection = window.getSelection(),

range = selection.getRangeAt(0),

newline = document.createTextNode('\n');

range.deleteContents();

range.insertNode(newline);

range.setStartAfter(newline);

range.setEndAfter(newline);

range.collapse(false);

selection.removeAllRanges();

selection.addRange(range);

}

这似乎适用于Chrome,Firefox和Safari,但在Internet Explorer中失败.

我的要求是它适用于最新版本的Chrome / FF和类似版本(有几个版本可能不是一个坏主意)和IE10.

我尝试了很多不同的东西,但似乎无法让它发挥作用.

任何帮助深表感谢！

编辑：

为了澄清,我在IE中的错误是插入换行符时插入符不会移动,而是新插入符号似乎是在插入符号之后添加的奇怪行为.但是,如果我按下输入一个,然后用箭头键向下移动到那一行,再次开始按Enter键,它按预期工作.不知道我在这里做错了什么.

解决方法:

这适用于IE 11和Chrome

if(getSelection().modify) { /* chrome */

var selection = window.getSelection(),

range = selection.getRangeAt(0),

br = document.createTextNode('\n');

range.deleteContents();

range.insertNode(br);

range.setStartAfter(br);

range.setEndAfter(br);

range.collapse(false);

selection.removeAllRanges();

selection.addRange(range); /* end chrome */

} else {

document.createTextNode('\n'); /* internet explorer */

var range = getSelection().getRangeAt(0);

range.surroundContents(newline);

range.selectNode(newline.nextSibling); /* end Internet Explorer 11 */

}

对不起它是多么无组织.我使用了getSelection().modify来确定它是否是因为IE由于某种原因没有修改.

标签：jquery,javascript,css,contenteditable,html

来源： https://codeday.me/bug/20190624/1278631.html