输入类型文本(不是textarea)中的插入位置(以像素为单位)

Question

更新:获取输入元素的获取光标或文本位置(以像素为单位).

TL; DR - 使用非常轻巧和强大的textarea-caret-position 组件库,现在也支持<input ype="text">它.演示http://jsfiddle.net/dandv/aFPA7/

---

有没有办法知道插入符号在HTML文本字段中的位置？

<input type='text' /> 

我想根据插入符的位置以像素(并重新定位)div的位置.

注意:我不想知道字符或字符中的位置<textarea>.我想知道<input>元素中的像素位置.

Answer 1

使用隐形人造元素

您可以通过使用绝对定位的不可见(使用visibilitynot display)虚拟元素来实现此目的,该元素具有与输入文本框(字体,左边框和左边距)相同的CSS属性.

这个非常简短易懂的JSFiddle是这个脚本应该如何工作的起点.
它可以在Chrome和Firefox中使用.而且它似乎应该在IE9 +合作也是如此.

Internet Explorer 8(及以下)需要一些额外的代码才能从输入文本框中的文本开头获取插入位置.我甚至在顶部添加了一个仪表,每隔10个像素显示一条线,这样你就能看出它是否正确测量.请注意,线条位于1,11,21,......像素位置.

这个例子实际上是将文本框中的所有文本都放到插入位置并将其放在虚假元素中,然后以像素为单位测量其宽度.这会使您从文本框的左侧偏移.

当它将文本复制到虚假元素时,它也会用非破坏元素替换普通空格,这样它们实际上会被渲染,否则如果你在空格后立即放置插入符号,则会出现错误的位置:

var faux = $("#faux");
$("#test").on("keyup click focus", function(evt) {
    // get caret offset from start
    var off = this.selectionStart;

    // replace spaces with non-breaking space
    faux.text(this.value.substring(0, off).replace(/\s/g, "\u00a0"));
});?

请注意,人造的正确尺寸

• 填充
• 边界
• 余量

已被删除以获得正确的值,否则元素将太宽.元素的框必须在它包含的文本之后结束.

从输入框开始,Caret的像素位置很容易从以下位置获得:

faux.outerWidth();

问题

但是有一个问题.我不确定当文本框中的文本滚动时(如果太长)并且插入符号不在文本的最末端但介于其间的某个位置时如何处理情况...如果它在结尾处则插入位置始终处于可能的最大位置(输入宽度减去右侧尺寸 - 填充,边框,边距).

我不确定是否可以在文本框中获得文本滚动位置？如果可以,那么即使这个问题也可以解决.但我不知道有任何解决方案......

希望这可以帮助.