javascript - contenteditable div 获取光标位置

Question

我发现一个代码片段可以正常工作，除非有换行符。按 Enter 键会创建 html 元素，并且该函数会产生错误的结果。有人能解决这个问题吗？

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

Answer 1

您面临的问题是由于浏览器差异造成的。例如，I.E 将添加 <p></p>当您按 Enter 键然后 <br/> 时标记当按下shift-Enter键时。 Chrome 实现 <div>...</div>当您按 Enter 和 <br/> 时围绕内容当按下shift-Enter键时。

您需要通过捕获按键事件或使用 jQuery 插件来处理此问题，该插件将使 Enter 按键成为跨浏览器的标准。有Stack Overflow问题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" />