Question

当用户在内容可编辑的div中键入文本时，有几个用于查找光标位置的配方，但我无法使其中任何一个工作。事实上，我从最简单的代码中得到了最令人惊讶的结果;如果，在下面的代码片段中，您添加一些文本然后退格以删除它，您的startoffset实际上会增加！（我可以想象它的分裂元素或其他东西，偏移包括不可打印的标签或其他东西。）

我有一个div会有一个固定的字体，但我打算添加语法高亮（它不是代码镜像可以做的;它更具交互性的提示，在脚本中的任何地方进行编辑，如果那样有意义我为什么我想自己获得这个职位。）

<html>
<head>
<script type="text/javascript">
<!--
var ta = null;

function onKeypress(event) {
    var range = window.getSelection().getRangeAt(0);
    document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset;
}

function init() {
    ta = document.getElementById("ta");
    ta.focus();
    ta.onkeypress = onKeypress;
}
//-->
</script>
<body onload="init();">
<noscript>
Sorry, you need javascript.  Not much to see here otherwise; move along.
</noscript>
<p id="msg"></p><hr/>
<div id="ta" contenteditable="true" style="width:100%; height:100%; font-family: courier;">
</div>
</body>
</html>

如何在这样的内容可编辑div中知道行和列，并获取任何行的文本？

Answer 1

将onkeypress更改为onkeydress（以便捕获退格）时，我看到当输入退格时位置显示会增加一次。

请原谅我，如果我有错误的结局，但我相信一个解决方案正在做以下事情：

var ta = null;
var range = null;

function onKeyDown(event) {
    if(event.which != 8 && event.which != 46) {
        range = window.getSelection().getRangeAt(0);
        document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset;
    }
}

function onKeyUp(event) {
    range = window.getSelection().getRangeAt(0);
    document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset;
}

function init() {
    ta = document.getElementById("ta");
    ta.focus();
    ta.onkeydown = onKeyDown;
    ta.onkeyup = onKeyUp;
}

Answer 2

您是否考虑使用文本框而不是div？

<textbox>edit my content</textbox>

如果必须使用div，则可以使用innerHTML属性获取并更新其内容

alert(document.getElementById('theIdOfMyDiv').innerHTML);

或添加内容

var currentContent = document.getElementById('theIdOfMyDiv').innerHTML;
currentContent = currentContent + 'add some content';

在内容可编辑的div中获取游标行和列

2 个答案: