题 如何在HTML textarea中找到光标位置(X / Y,而不是行/列)? [重复]


这个问题在这里已有答案:

我想在一个下拉列表中显示一个 <textarea> 帮助用户输入某些东西。您从当前的IDE中了解这是代码完成。当您开始输入内容时,弹出窗口将出现在当前光标/插入符号位置右侧,您可以使用箭头键导航它以完成文本输入。

我知道 如何获得光标位置 在文本字符串(即光标位置的字符索引)但我不知道如何获得X / Y坐标(类似于 offsetWidth 和 offsetHeight)里面的光标 <textarea> 元素,以便我可以在那里定位我的列表元素。这可能在HTML / JavaScript中,它将如何工作?


20
2017-08-05 07:43


起源


+1这是一个非常好的问题! - Ben
如果您知道字符数和框的宽度,您可以根据平均字符宽度/行高来猜测位置吗? - Ben Williams
我已经阅读了提出的其他问题,但我不认为它的答案是解决问题的方法。此外,它已有3年历史,同时浏览器和标准也在不断发展。我并不害怕要求当前的浏览器才能工作。 - ygoe
@BenWilliams:您可以猜测线高,但不是宽度。但是,您可以抓取文本,使用该文本创建元素,并测量元素的宽度。只要你在每次触发按键事件时都没有创建新元素,它就不会太糟糕。 - callumacrae
忘了考虑一下,现在编辑也为时已晚。等宽字体!是的,那会很好。 +1。 - callumacrae


答案:


使用可编辑的html输入(在iframe中,如 CKEDITOR 要么 富文本编辑器 甚至更好: 的jsfiddle)您可以在插入位置插入一个空的span元素,并获取该元素的位置以显示您的下拉列表。

这可能看起来很复杂,但我想不出有任何其他方法可以做到这一点。

当用于代码编辑器时,它有一些额外的可能性,你可以像jsfiddle一样对文本和格式代码进行颜色编码,甚至可以构建某种代码 - 自动完成关键字等。


2
2017-08-05 12:45



额外的可能性听起来不错,你有趣的建议也是如此。但我想确保用户无法输入格式化文本(例如从MS Word或其他网页复制时),并且所有粘贴的文本都被重新格式化为纯文本并且可以转换为此类文本。 - ygoe
这是可能的,jsfiddle.net就是这么做的。他们究竟是怎么做的我不知道。尝试在该网站上编码和粘贴片刻,它可能会给你一些想法。 (在FF ctrl + v中不起作用,但“右击 - 粘贴”确实) - Willem
CKeditor可以下载并用作开源,但jsfiddle似乎只是一个Web应用程序,没有下载,没有技术见解。你知道他们是怎么做的吗? - ygoe
它们似乎拦截了粘贴命令,以便在插入代码之前或之后对代码进行格式化。我猜这是一个keyup处理程序或其他东西,可能有一个小超时让浏览器粘贴然后更改它。格式化代码的功能必须做很多事情,首先删除所有不需要的html(带正则表达式),然后添加缩进(可选),然后添加颜色(添加html元素)。我想我可以编写类似的东西,但代码需要花费很多时间,还有更多代码可以在“其他浏览器”中运行。 - Willem