contenteditable div 获取光标位置答案

【问题标题】：contenteditable div get cursor positioncontenteditable div 获取光标位置
【发布时间】：2012-02-13 18:53:34
【问题描述】：

我发现了一个代码 sn-p 可以正常工作，除非有换行符。点击回车会创建 html 元素，并且该函数会产生错误的结果。任何人都可以解决这个问题？

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

【问题讨论】：

【解决方案1】：

您面临的问题是由于浏览器差异造成的。例如，IE 将在您按 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" />

【讨论】：