contenteditable divカーソル位置を取得

Question

改行がある場合を除いて正常に動作するコードスニペットが見つかりました。 hitting enterはhtml要素を作成し、関数は間違った結果を生成します。誰にでも解決策がありますか？

は、私がこれまでに次のスクリプトを使用： http://niichavo.wordpress.com/2009/01/06/contenteditable-div-cursor-position/

Answer 1

問題あなたの対面には、ブラウザの違いによるものです。たとえば、I.EはEnterキーを押したときに<p></p>タグを追加し、shift-Enterを押すと<br/>タグを追加します。 ChromeはEnterキーを押すとコンテンツの周りに<div>...</div>を実装し、shift-Enterを押すと<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" />