在contenteditable div中的输入键上插入换行符

时间:2014-05-31 21:05:18

标签: javascript jquery html css 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键,它按预期工作。不知道我在这里做错了什么。

3 个答案:

答案 0 :(得分:4)

这适用于IE 11和chrome for me

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由于某种原因没有修改。

答案 1 :(得分:0)

这样的事情?

if(e.which==13){
    e.preventDefault();
    $('#divID').html($('#divID').text()+"<br />");
}

答案 2 :(得分:0)

尝试一下:

document.execCommand('insertHTML', false, '<br><br>');

即使撤消\重做:)