阻止在ENTER上添加<div> - Chrome

Question

我有一个contenteditable元素,每当我输入一些东西并点击ENTER它创建一个新的<div>并将新的行文本放在那里.我不喜欢这一点.

是否有可能防止这种情况发生或至少只是用一个<br>？

这是演示http://jsfiddle.net/jDvau/

注意:这不是firefox中的问题.

Answer 1

试试这个

$('div[contenteditable]').keydown(function(e) {
    // trap the return key being pressed
    if (e.keyCode === 13) {
      // insert 2 br tags (if only one br tag is inserted the cursor won't go to the next line)
      document.execCommand('insertHTML', false, '<br><br>');
      // prevent the default behaviour of return key pressed
      return false;
    }
  });

在这里演示

Answer 2

只需更改CSS即可完成此操作:

div{
    background: skyblue;
    padding:10px;
    display: inline-block;
}

pre{
    white-space: pre-wrap;
    background: #EEE;
}

http://jsfiddle.net/ayiem999/HW43Q/

Answer 3

添加样式display:inline-block;到contenteditable,也不会产生div,p并span自动在Chrome中.

Answer 4

这适用于所有主要浏览器（Chrome、Firefox、Safari、Edge）

document.addEventListener('keydown', event => {
  if (event.key === 'Enter') {
    document.execCommand('insertLineBreak')
    event.preventDefault()
  }
})

<div class="element" contenteditable="true">Sample text</div>
<p class="element" contenteditable="true">Sample text</p>

有一个不便之处。完成编辑后，元素<br>内部可能包含结尾。但是如果需要，您可以添加代码来减少它。

检查此答案以删除尾随<br> /sf/answers/4286641621/

Answer 5

在 W3C 编辑器草稿中，有一些有关将状态添加到ContentEditable中的信息，并防止浏览器在按 Enter 时添加新元素，您可以使用plaintext-only。

<div contentEditable="plaintext-only"></div>

Answer 6

试试这个:

$('div[contenteditable="true"]').keypress(function(event) {

    if (event.which != 13)
        return true;

    var docFragment = document.createDocumentFragment();

    //add a new line
    var newEle = document.createTextNode('\n');
    docFragment.appendChild(newEle);

    //add the br, or p, or something else
    newEle = document.createElement('br');
    docFragment.appendChild(newEle);

    //make the br replace selection
    var range = window.getSelection().getRangeAt(0);
    range.deleteContents();
    range.insertNode(docFragment);

    //create a new range
    range = document.createRange();
    range.setStartAfter(newEle);
    range.collapse(true);

    //make the cursor there
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);

    return false;
});

http://jsfiddle.net/rooseve/jDvau/3/

Answer 7

document.execCommand('defaultParagraphSeparator', false, 'p');

它会覆盖默认行为以改为使用段落.

在chrome上,enter的默认行为是:

<div>
    <br>
</div>

有了这个命令,它就会成功

<p>
    <br>
</p>

现在它更加线性,很容易只有<br>你需要.

Answer 8

使用shift+ enter而不是enter只放入一个<br>标签或将文本包装在<p>标签中.

Answer 9

contenteditable按下时的行为方式enter取决于浏览器,<div>发生在webkit(chrome,safari)和IE上.

几个月前,我一直在努力,我这样纠正了:

//I recommand you trigger this in case of focus on your contenteditable
if( navigator.userAgent.indexOf("msie") > 0 || navigator.userAgent.indexOf("webkit") > 0 ) {
    //Add <br> to the end of the field for chrome and safari to allow further insertion
    if(navigator.userAgent.indexOf("webkit") > 0)
    {
        if ( !this.lastChild || this.lastChild.nodeName.toLowerCase() != "br" ) {
            $(this).html( $(this).html()+'<br />' );
        }
    }

    $(this).keypress( function(e) {
        if( ( e.keyCode || e.witch ) == 13 ) {
            e.preventDefault();

            if( navigator.userAgent.indexOf("msie") > 0 ) {
                insertHtml('<br />');
            }
            else {
              var selection = window.getSelection(),
              range = selection.getRangeAt(0),
              br = document.createElement('br');

              range.deleteContents();
              range.insertNode(br);
              range.setStartAfter(br);
              range.setEndAfter(br);
              range.collapse(false);

              selection.removeAllRanges();
              selection.addRange(range);
            }
        }
    });
}

我希望它会有所帮助,如果它不是那么清楚,我会为我的英语感到抱歉.

编辑:删除jQuery函数的更正jQuery.browser

Answer 10

您可以<p>为每一行设置单独的标签，而不是使用<br>标签，并且开箱即用地获得更大的浏览器兼容性。

为此，请<p>在 contenteditable div 内放置一个带有一些默认文本的标签。

例如，而不是：

<div contenteditable></div>

用：

<div contenteditable>
   <p>Replace this text with something awesome!</p>
</div>

提琴手

在 Chrome、Firefox 和 Edge 中进行了测试，第二个在每个中都相同。

然而，第一个在 Chrome 中创建 div，在 Firefox 中创建换行符，而在 Edge 中创建 div ，光标被放回当前 div 的开头而不是移动到下一个。

在 Chrome、Firefox 和 Edge 中测试。

Answer 11

我喜欢使用捕鼠器来处理热键：https ://craig.is/killing/mice

然后，我只是拦截 enter 事件，执行命令insertLineBreak：

Mousetrap.bindGlobal('enter', (e)=>{
  window.document.execCommand('insertLineBreak', false, null);
  e.preventDefault();
});

所有命令：https : //developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

它使用 Chrome 75 和以下可编辑元素工作：

<pre contenteditable="true"></pre>

也可以使用insertHTML：

window.document.execCommand('insertHTML', false, "\n");