[英]Insert newline on enter key in 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由于某种原因没有修改。
这样的事情?
if(e.which==13){
e.preventDefault();
$('#divID').html($('#divID').text()+"<br />");
}
试试这个:
document.execCommand('insertHTML', false, '<br><br>');
甚至撤消\\重做工作:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.