在contenteditable div中的Enter键上插入换行符 [英] 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（'\\\
'）; 
 
 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 +。 / p>

我尝试了很多不同的东西，但似乎不能让它工作。

帮助是非常感谢！

编辑：
为澄清，我的错误在IE中是插入符不插入换行符时移动，而是换行符似乎是添加后的插入符号是奇怪的行为。但是，如果我按下输入一，然后用箭头键向下移动到那条线，并再次开始按回车，它的工作原理。

解决方案

这在IE 11和chrome适用于我

  if（getSelection（）。modify）{/ * chrome * / 
 var selection = window.getSelection（），
 range = selection.getRangeAt（0），
 br = document.createTextNode（'\\\
'）; 
 range.deleteContents（）; 
 range.insertNode（br）; 
 range.setStartAfter（br）; 
 range.setEndAfter（br）; 
 range.collapse（false）; 
 selection.removeAllRanges（）; 
 selection.addRange（range）; / * end chrome * / 
} else {
 document.createTextNode（'\\\
'）; / * internet explorer * / 
 var range = getSelection（）。getRangeAt（0）; 
 range.surroundContents（newline）; 
 range.selectNode（newline.nextSibling）; / * end Internet Explorer 11 * / 
} 
  

我使用getSelection（）。modify来确定它是否是ie，因为IE由于某种原因没有修改。

I am trying to insert a newline character instead of whatever the browser wants to insert when I press enter in a contenteditable div.

My current code looks something like this:

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);
    }

This seems to work in Chrome, Firefox and Safari but fails in internet explorer.

My requirement is that it works in the most recent versions of Chrome/FF and similar (a couple versions back wouldn't be a bad idea) and in IE10+.

I have tried a lot of different things but just can't seem to get it to work.

Any help is much appreciated!

Edit: For clarification, the error for me in IE is that the caret does not move when the newline is inserted, but rather the newline seems to be added after the caret which is odd behavior. But if I press enter one, then move down to that line with the arrow keys, and start pressing enter again, it works as intended. Can't tell what I'm doing wrong here.

解决方案

this works in IE 11 and 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 */
}

sorry for how unorganized it is. I used getSelection().modify to determine if it was ie or not because IE doesn't have modify for some reason.

这篇关于在contenteditable div中的Enter键上插入换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！