防止Firefox在用户点击返回时创建新的可用div [英] Prevent Firefox from making a new contenteditable div when user hits return

问题描述

我的网站上有一个可以理解的div，效果很好。

在Chrome上，我可以使用返回键添加另一行。
$ b

在Firefox上，它会创建一个新的（额外）div。

我知道我可以使用shift + return，但是我不认为用户现在可以：）

是否可以防止这种行为？

检查小提琴： http://jsfiddle.net/D7MJx/

我已经用FF 3.6试过了

编辑：同样的事情发生在IE8上

解决方案

好吧，我现在有点想出来。

这不是最好的（阅读最干净的）解决方案，但它适用于我。

只有在Chrome上进行了测试，但我认为其他浏览器的工作方式也是一样。

我最终这样做了： / p>

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

I have a contenteditable div on my site which works great.

On Chrome i can just use the return key to add another line.

On Firefox it creates a new (extra) div.

I know I can use shift+return, but I don't think the users will now that :)

Is it possible to prevent this behaviour?

Check out the fiddle: http://jsfiddle.net/D7MJx/

I've tried it with FF 3.6

EDIT: The same thing happens on IE8

解决方案

Ok I kinda figured it out now.

It's not the best (read cleanest) solution, but it works for me.

Only have tested this on Chrome, but I think other browsers will work the same.

I ended up doing this:

  $('div[contenteditable=true]').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 second line)
      document.execCommand('insertHTML', false, '<br><br>');
      // prevent the default behaviour of return key pressed
      return false;
    }
  });

这篇关于防止Firefox在用户点击返回时创建新的可用div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！