防止 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