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

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

我有一个div，将有一个固定的字体，但我打算添加语法突出显示（它不是什么codemirror可以只是做;它的互动性更强的提示与编辑脚本中的任何地方，如果那样的品牌意识，为什么我想要得到自己的位置）

<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？

来源

2012-03-31 Will

我不知道你说的是你的代码错误。当我在Chrome中测试您的示例代码时，代码似乎工作 - 当我退格时，位置显示不会更新，直到我开始在div中输入更多文本，但位置显示再次正确。是否退格不会触发keyup事件或其他我缺少的东西？ – Griffin 2012-04-01 15:17:11

啊，我想我明白了，我发布了一个答案。 – Griffin 2012-04-01 15:29:49

-1

你有没有考虑过使用文本框而不是divs？

<textbox>edit my content</textbox>

如果你必须使用一个div你可以用innerHTML属性

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

或添加内容

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

来源

2012-04-01 10:42:53 codelove

你甚至读过这个问题吗？ – Griffin 2012-04-01 15:11:16

+1了解问题 – codelove 2012-04-01 20:55:15

获取和更新其内容在改变onkeypress事件到的onkeydown（所以backspace被捕获）我看到，当退格输入时，位置显示会增加一次。

原谅我，如果我有棍子的错误结束，但我相信一个解决方案是执行以下操作：

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

来源

2012-04-01 15:29:26 Griffin

如果按下回车键会发生什么情况？ – Will 2012-04-02 06:11:52

它从零开始重新计数。代码中没有任何内容显示光标所在的行。 – Griffin 2012-04-02 10:33:11

但这是更大的问题！ “我怎么能知道行和列，并获得任何行的文本，在这样一个内容可编辑的div？”。由于这就像一个富文本编辑器，每次用户按下一个键时，我都想知道他们在哪条线上，线内容是什么。 – Will 2012-04-02 11:11:31

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

回答

相关问题