contenteditable div獲取光標位置

Question

我發現一個代碼片段可以正常工作，除非有換行符。 點擊enter創建html元素，該函數產生錯誤的結果。 有人對此有解決方案嗎？

到目前為止，我使用了以下腳本： http : //niichavo.wordpress.com/2009/01/06/contenteditable-div-cursor-position/

Answer 1

您面臨的問題是由於瀏覽器的差異。 例如，當您按Enter鍵時，IE將添加<p></p>標記，而當按shift-Enter鍵時，將添加<br/> 。 Chrome瀏覽器實現<div>...</div>內容周圍，當你按下回車鍵<br/>擊中移輸入時。

您需要通過捕獲按鍵事件或使用jQuery插件（將使Enter鍵在所有瀏覽器中成為標准）來處理。 這里和這里都存在堆棧溢出問題，這將有所幫助。

這是我用來測試的代碼。

<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" />