contenteditable div獲取光標位置

Question

我發現了一個代碼片段，除了存在換行符時，它可以正常工作。按Enter鍵創建html元素並且函數產生錯誤的結果。任何人解決這個問題？

我用下面的腳本至今： http://niichavo.wordpress.com/2009/01/06/contenteditable-div-cursor-position/

Answer 1

問題你面對的是由於瀏覽器的差異。例如，I.E將在您按Enter時添加<p></p>標籤，然後在按Shift-Enter時添加<br/>。當您點擊enter鍵時，Chrome在內容周圍實現<div>...</div>;當點擊shift-Enter時，Chrome會執行<br/>。

您需要通過捕獲按鍵事件或使用jQuery插件來處理這個問題，該插件將在瀏覽器中實現輸入按鍵標準。有堆棧溢出問題here和here這將有所幫助。

這是我用來測試的代碼。

<script type="text/javascript"> 
    $(function() { 
     $('#ShowButton').click(function (e) { 
      alert($('#CED').html()); 
     }); 
    });  
</script> 

<canvas id="drawingSurface" class="canvasLayout"> 

</canvas> 

<div id="CED" contenteditable="true"> 
    Text goes here 
</div> 

<input type="button" value="Show HTML" id="ShowButton" />