为了账号安全,请及时绑定邮箱和手机立即绑定

如何在文本框中获取插入符号的(x,y)像素坐标?

/ 猿问

如何在文本框中获取插入符号的(x,y)像素坐标?

森栏 2019-08-19 17:30:04

如何在文本框中获取插入符号的(x,y)像素坐标?

我正在使用jQuery并试图找到一种跨浏览器的方式来获取插入符号<textarea>input盒子中的插入符号,这样我就可以在这个位置放置一个绝对定位的div。

有一些jQuery插件吗?或者JavaScript代码片段就是这么做的?


查看完整描述

3 回答

?
守着星空守着你

我已经为meteor-autocomplete寻找了textarea插入符号插件,所以我已经评估了GitHub上的所有8个插件。到目前为止,胜利者是来自Component的textarea-caret-position

特征

  • 像素精度

  • 没有依赖关系

  • 浏览器兼容性:Chrome,Safari,Firefox(尽管有两个 漏洞),IE9 +; 可以工作,但未在Opera,IE8或更早版本中测试过

  • 支持任何字体系列和大小,以及文本转换

  • 文本区域可以具有任意填充或边框

  • 不会被textarea中的水平或垂直滚动条混淆

  • 支持硬回车,标签(IE上除外)和文本中的连续空格

  • 在比文本区域中的列长的行上的正确位置

  • 当包裹长词时,在行尾的空白处没有“鬼”位置

这是一个演示 - http://jsfiddle.net/dandv/aFPA7/

https://img3.mukewang.com/5d5a6c5200012d8707540561.png

这个怎么运作

<div>屏幕外创建一面镜子,风格与之完全相同<textarea>。然后,直到插入符号的textarea的文本被复制到div中,并且<span>在它之后插入a 。然后,跨度的文本内容被设置为textarea中文本的剩余部分,以便忠实地再现人造div中的包装。

这是保证处理与包装长行相关的所有边缘情况的唯一方法。它也被GitHub用来确定其@用户下拉列表的位置。


查看完整回答
反对 回复 2019-08-19
?
侃侃无极

注意:这个答案描述了如何获得text-cursor / caret 的字符坐标。要找到像素坐标,您需要进一步扩展。

要记住的第一件事是光标可以处于三种状态

  • 在特定位置的常规插入光标

  • 具有特定有界区域的文本选择

  • 不活跃:textarea没有焦点。尚未使用过。

IE模型使用Object document.selection,从中我们可以得到一个TextRange对象,它允许我们访问选择,从而访问光标位置。

FF模型/ Opera使用方便的变量[input] .selectionStart和selectionEnd。

两种模型都将常规活动光标表示为零宽度选择,左边界是光标位置。

如果输入字段没有焦点,您可能会发现两者都没有设置。我使用以下代码取得了很好的成功,在当前光标位置插入一段文本,同时替换当前选择(如果存在)。根据确切的浏览器,YMMV。

function insertAtCursor(myField, myValue) {/* selecion model - ie */if (document.selection) {
  myField.focus();
  sel = document.selection.createRange();
  sel.text = myValue;}/* field.selectionstart/end  firefox */ else if (myField.selectionStart || myField.selectionStart == '0' ) {

  var startPos = myField.selectionStart;
  var endPos = myField.selectionEnd;
  myField.value = myField.value.substring(0, startPos)
    + myValue    + myField.value.substring(endPos, myField.value.length);

  myField.selectionStart = startPos + myValue.length;
  myField.selectionEnd = startPos + myValue.length;
  myField.focus();} // cursor not active/presentelse {
  myField.value += myValue;}

错误注意:链接未在顶部参数中正确标记。

选择对象:http//msdn.microsoft.com/en-us/library/ms535869(
VS.85).aspx TextRange对象:http//msdn.microsoft.com/en-us/library/ms535872( VS 。 85)的.aspx


查看完整回答
反对 回复 2019-08-19
?
慕莱坞5435954

我不认为它可以在每个浏览器中完成。有人在IE6中完成了它,但它在FF或Opera(AFAIK)中不起作用。也许你可以在所有浏览器中使用它。

这是2005年的博客文章


查看完整回答
反对 回复 2019-08-19

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信