防止contenteditable添加< div>在ENTER上 - Chrome [英] Prevent contenteditable adding <div> on ENTER - Chrome

问题描述

我有一个 contenteditable 元素，并且每当我键入一些东西并按 ENTER 时，它会创建一个新的< div> 并将新行文本放在那里。我不喜欢这一点。

是否可以防止这种情况发生，或者至少用< br> ？

以下是演示 http://jsfiddle.net/jDvau/

注意：在Firefox中这不是问题。

解决方案

试试这个

  $（'div [contenteditable]'）。keydown函数（e）{
 //捕获返回键被按下
 if（e.keyCode === 13）{
 //插入2个br标签（如果只插入一个br标签光标将不会进入下一行）
 document.execCommand（'insertHTML'，false，'< br>< br>'）; 
 //防止返回键的默认行为按下
返回false; 
} 
}）; 
  

演示这里

I have a contenteditable element, and whenever I type some stuff and hit ENTER it creates a new <div> and places the new line text in there. I don't like this one little bit.

Is it possible to prevent this from happening or at least just replace it with a <br>?

Here is demo http://jsfiddle.net/jDvau/

Note: This is not an issue in firefox.

解决方案

Try this

$('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;
    }
  });

Demo Here

这篇关于防止contenteditable添加< div>在ENTER上 - Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！