使用不可见的伪元素
你可以通过使用一个绝对定位的不可见(使用visibility
而不是display
)的伪元素,它具有与输入文本框相同的所有CSS属性(字体,左边框和左填充),来实现这一点。
这个非常简短且易于理解的JSFiddle是一个如何工作的起点。
在Chrome和Firefox中,它可以直接使用。 而且似乎也应该在IE9+中工作。
Internet Explorer 8(及以下版本)需要一些额外的代码才能从输入框内文本的开头获取插入符位置。我甚至在顶部添加了一个仪表图,以显示每10像素的线,以便您可以看到是否正确测量。注意,线条位于1、11、21...像素位置。
这个例子的作用实际上是将插入符位置之前的所有文本放入伪元素里面,并测量它的像素宽度。这样可以得到从文本框左侧的偏移量。
当它将文本复制到伪元素时,它还会用非断行空格替换普通空格,以便它们实际上被渲染。否则,如果您将插入符定位在空格之后,您将得到错误的位置:
var faux = $("#faux");
$("#test").on("keyup click focus", function(evt) {
var off = this.selectionStart;
faux.text(this.value.substring(0, off).replace(/\s/g, "\u00a0"));
});
注意假维度的正确尺寸
已被移除以获取正确的值,否则元素会太宽。元素的框必须紧随其包含的文本之后结束。
插入符号在输入框开始位置的像素位置可以轻松获取:
faux.outerWidth();
问题
然而,有一个问题。我不确定如何处理文本框内的文本被滚动时(当太长时),插入符不是在文本的最末尾,而是在中间某个位置...如果它在末尾,那么插入符的位置总是在可能的最大位置(输入宽度减去右侧维度 - 填充、边框、外边距)。
我不确定是否可能获得文本框内文本的滚动位置?如果可以,则甚至可以解决此问题。但是我不知道任何解决方法...
希望这有所帮助。
<input type="text">
),而不是获取文本框(也称为<textarea>
元素)中插入符号的像素坐标。 - Dan Dascalescu<input type="text">
,使所有现有答案都过时了。演示请见http://jsfiddle.net/dandv/aFPA7。 - Dan Dascalescu