在文本区域中获取插入符号XY坐标
ors*_*har 3 html javascript jquery textarea caret
是否有任何好的JQuery/JS解决方案来获得文本区域中插入符号的绝对位置(以X/Y坐标或顶部/左侧坐标给出).
keyDown JQuery函数的本机Event对象给出了光标的x/y坐标,我想要一些类似工作插入符号的工作.
我的目标是添加一个浮动的HTML元素,它将相对于工作插入位置定位,所以我需要以某种方式获得它的位置.
我需要解决方案来处理TextArea元素,但任何可编辑的html元素的通用解决方案都会更好!
可能你想要替换<textarea>它<div contenteditable="true">,它具有几乎相同的行为,你可以通过传统方式获得坐标.
- @ValentinKantor谢谢.然后抓住包含在插入位置处插入的跨度中的零宽度unicode字符的x,y偏移量. (4认同)
我已经为meteor-autocomplete寻找了textarea插入符号插件,所以我已经评估了GitHub上的所有8个插件.到目前为止,胜利者是来自Component的textarea-caret-position.
特征
- 像素精度
- 没有任何依赖
- 浏览器兼容性:Chrome,Safari,Firefox(尽管有两个 漏洞),IE9 +; 可以工作,但没有在Opera,IE8或更早版本中测试过
- 支持任何字体系列和大小,以及文本转换
- 文本区域可以具有任意填充或边框
- 不会被textarea中的水平或垂直滚动条混淆
- 支持硬回车,标签(IE上除外)和文本中的连续空格
- 在比文本区域中的列长的行上的正确位置
- 当包裹长词时,在行尾的空白处没有"鬼"位置
这是一个演示 - http://jsfiddle.net/dandv/aFPA7/
这个怎么运作
<div>屏幕外创建一面镜子,风格与之完全相同<textarea>.然后,直到插入符号的textarea的文本被复制到div中,并且<span>在它之后插入a .然后,跨度的文本内容被设置为textarea中文本的剩余部分,以便忠实地再现人造div中的包装.
这是保证处理与包装长行相关的所有边缘情况的唯一方法.它也被GitHub用来确定其@用户下拉列表的位置.