做一個<br>而不是<div></div>按Enter鍵在CONTENTEDITABLE

我寫一些代碼在我的鍵盤事件處理程序響應中插入一個<br>到的輸入按鍵：做一個<br>而不是<div></div>按Enter鍵在CONTENTEDITABLE

event.preventDefault(); 
document.execCommand('InsertHTML', true, '<br>');

這隻有當光標在兩個字母之間時才起作用，如果它最後我需要兩個<br> -Elements。我可以檢測到我是否在線的末尾？或者對於Enter問題還有其他一些工作理念？

我也試圖捕捉正常的按鍵事件（沒有按Ctrl鍵），並創建一個JS鍵盤事件，其中輸入鍵與CTRL一起按下。但這不到風度工作...

它只有在WebKit的/ Safari瀏覽器...工作

來源

2010-06-20 Phil

爲了解決你的問題，始終保持BR元素爲您CONTENTEDITABLE div的最後一個元素。這將確保注入br元素時的可預測行爲與注入div元素的瀏覽器默認值。你可以在keyup和mouseup上檢查lastChild以確保它是br元素。假設你有一個這樣的文件：

<div id="editable" contenteditable="true"></div>

您可以使用下面的JavaScript（W/jQuery的1.4+），以保持br元素作爲最後一個元素，並注入br元素，而不是DIV DIV：

$(function(){ 

    $("#editable") 

    // make sure br is always the lastChild of contenteditable 
    .live("keyup mouseup", function(){ 
     if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") { 
     this.appendChild(document.createChild("br")); 
     } 
    }) 

    // use br instead of div div 
    .live("keypress", function(e){ 
     if (e.which == 13) { 
     if (window.getSelection) { 
      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); 
      return false; 
     } 
     } 
    }); 

});

在Apple OS X w/Google Chrome 7，Mozilla Firefox 3.6，Apple Safari 5上測試）。嘗試使用ierange以使其在Windows Internet Explorer中正常工作。

來源

2010-11-16 22:25:51

無需'range.collapse（假）;'：你已經放置在開始和範圍的結束。 IERange的另一種選擇是我自己的Rangy（http://code.google.com/p/rangy），它的概念相似但更完全實現（並積極維護）。 – 2011-05-18 09:09:44

我會將一個函數綁定到keyup事件上，使用regEx刪除並更改爲
。所以即使它創建了奇怪的標記，它也會被修復。

使用jQuery：

$('.myEditable').keyup(function(){ 
    var sanitazed = $(this).text().replace(/<div[^<]*?>/g, '').replace(/<\/div[^<]*?>/g, '<br>'); 
    $(this).text(sanitazed); 
});

來源

2011-05-31 13:10:01 Bakaburg

1）.html（）必須使用，而不是.text（）2）它的工作原理，但光標保持在
之前，而不是之後（按Enter鍵後）。 – Meglio 2013-03-21 20:00:02

做一個<br>而不是<div></div>按Enter鍵在CONTENTEDITABLE

回答

相關問題