Javascript 获取内容可编辑div中的光标行和列

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

我有一个div，它有一个固定的字体，但我计划在其中添加语法高亮显示（这不是codemirror可以做的事情；如果这种方式有意义的话，它会在脚本中的任何地方提供更交互式的编辑提示，我想自己获得这个职位。）

抱歉，您需要javascript。除此之外，这里没有什么可看的；往前走。

---

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

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

<textbox>edit my content</textbox>

或者添加内容

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

---

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

请原谅我，如果我犯了错误，但我相信一个解决办法是做以下事情：

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;
}

---

我不确定你说的代码是否有问题。当我在Chrome中测试你的示例代码时，代码似乎起作用了——当我退格时，位置显示不会更新，直到我开始在div中输入更多文本，但是位置显示再次正确。问题是backspace没有触发keyup事件，或者我遗漏了什么？啊，我想我明白了，我发布了一个答案。如果按enter键会发生什么？它会从零开始重新计数。代码中没有显示光标所在行的内容。但这是一个更大的问题！“在这样一个内容可编辑的div中，如何知道行和列，并获取任何行的文本？”。因为这就像一个富文本编辑器，每次用户按下一个键，我都想知道他们在哪一行，这一行的内容是什么。啊，从你的问题和代码来看，我认为这意味着你的行位置没有问题。我建议您找到一个脚本，该脚本为您提供整个字符串中的光标位置，然后计算字符串中的换行符，直到该位置-这就是您的行计数。然后计算光标和最后一个换行符之间的字符数-列计数。通过快速搜索，我找到了这段代码，它给出了光标在字符串中的位置（忽略html）

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

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;
}