gpt4 book ai didi

javascript - 在内容可编辑的 div 中获取光标行和列

转载 作者:搜寻专家 更新时间:2023-11-01 04:42:39 24 4
gpt4 key购买 nike

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

我有一个 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 中,我如何知道行和列,并获取任何行的文本?

最佳答案

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

关于javascript - 在内容可编辑的 div 中获取光标行和列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9959509/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com