防止 contenteditable 添加<div> 在 ENTER – Chrome

问题描述

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

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

注意：这不是 Firefox 的问题。

最佳解决方案

尝试这个

$('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

次佳解决方案

你可以通过一个 CSS 更改来做到这一点：

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

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

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

第三种解决方案

尝试这个：

$('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/

第四种方案

将 display:inline-block; 的样式添加到 contenteditable 中，不会在 Chrome 中自动生成 div，p 和 span 。

第五种方案

使用 shift + enter 代替 enter，将单个<br> 标签放入或包装在<p> 标签中。

第六种方案

我会使用样式 (Css) 来解决这个问题。

div[contenteditable=true] > div {
  padding: 0;
}

Firefox 确实添加了块元素中断，而 Chrome 将每个部分包装在标签中。你 css 给 div 一个 10px 的填充以及背景颜色。

div{
  background: skyblue;
  padding:10px;
}

或者，您可以在 jQuery 中复制相同的所需效果：

var style = $('<style>p[contenteditable=true] > div { padding: 0;}</style>');
$('html > head').append(style);

这是你的小提琴 http://jsfiddle.net/R4Jdz/7/的叉子

第七种方案

添加一个防止默认的 div

document.body.div.onkeydown = function(e) {
    if ( e.keycode == 13 ){
        e.preventDefault();
            //add a <br>
        div = document.getElementById("myDiv");
        div.innerHTML += "<br>";
    }
}

第八种方案

尝试使用 ckeditor 。它也提供像 SOF 这样的格式。

https://github.com/galetahub/ckeditor

第九种方案

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

参考文献

Prevent contenteditable adding <div> on ENTER – Chrome

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

防止 contenteditable 添加<div> 在 ENTER – Chrome