获取输入元素的光标或文本位置像素 [英] Get cursor or text position in pixels for input element

问题描述

IE允许我在一个输入元素中创建一个文本范围，我可以在其中调用 getBoundingClientRect（），并以某个字符或光标的像素为单位/插入符号。在其他浏览器中，是否有以某个像素为单位获取某个字符位置的方法？

  var input = $（＃myInput）[0]; 
 var pixelPosition = null; 
 if（input.createTextRange）
 {
 var range = input.createTextRange（）; 
 range.moveStart（character，6）; 
 pixelPosition = range.getBoundingClientRect（）; 
} 
 else 
 {
 //有什么方法可以在输入值上创建一个范围？ 
} 
  

我使用jQuery，但是我怀疑它能解决我的问题情况。我期待一个纯粹的JavaScript解决方案，如果有的话，但欢迎jQuery的答案。

解决方案

我最终创建了一个隐藏的模拟输出一个跨度绝对定位和样式类似于输入。我将该跨度的文本设置为输入的值，直到我想要查找的位置的字符。在输入之前插入span，并得到它的偏移量：
$ b $ pre $函数getInputTextPosition（input，charOffset）
{
var pixelPosition = null;
if（input.createTextRange）
{
var range = input.createTextRange（）;
range.moveStart（character，charOffset）;
pixelPosition = range.getBoundingClientRect（）;
}
else
{
var text = input.value.substr（0，charOffset）.replace（/ $ /，\xa0）;
var sizer = $（＃sizer）。insertBefore（input）.text（text）;
pixelPosition = sizer.offset（）;
pixelPosition.left + = sizer.width（）;
if（！text）sizer.text（。）; //计算高度。空跨度返回0
pixelPosition.bottom = pixelPosition.top + sizer.height（）;
}
return pixelPosition
}

span：

  #sizer 
 {
 position：absolute; 
 display：inline-block; 
可见性：隐藏; 
 margin：3px; / *模拟填充和边界而不影响高度和宽度* / 
 font-family：segoe ui，Verdana，Arial，Sans-Serif; 
 font-size：12px; 
} 
  

IE allows me to create a text range in an input element, upon which I can call getBoundingClientRect() and get the position in pixels of a certain character or the cursor/caret. Is there any way of getting the position of a certain character in pixels in other browsers?

var input = $("#myInput")[0];
var pixelPosition = null;
if (input.createTextRange)
{
    var range = input.createTextRange();
    range.moveStart("character", 6);
    pixelPosition = range.getBoundingClientRect();
}
else
{
    // Is there any way to create a range on an input's value?
}

I'm using jQuery, but I doubt it will be able to address my situation. I expect a pure JavaScript solution, if any, but jQuery answers are welcome.

解决方案

I ended up creating a hidden mock input out of a span positioned absolutely and styled similarly to the input. I set the text of that span to the value of the input up to the character whose position I want to find. I insert the span before the input and get it's offset:

function getInputTextPosition(input, charOffset)
{
    var pixelPosition = null;
    if (input.createTextRange)
    {
        var range = input.createTextRange();
        range.moveStart("character", charOffset);
        pixelPosition = range.getBoundingClientRect();
    }
    else
    {
        var text = input.value.substr(0, charOffset).replace(/ $/, "\xa0");
        var sizer = $("#sizer").insertBefore(input).text(text);
        pixelPosition = sizer.offset();
        pixelPosition.left += sizer.width();
        if (!text) sizer.text("."); // for computing height. An empty span returns 0
        pixelPosition.bottom = pixelPosition.top + sizer.height();
    }
    return pixelPosition
}

The css for my sizer span:

#sizer
{
    position: absolute;
    display: inline-block;
    visibility: hidden;
    margin: 3px; /* simulate padding and border without affecting height and width */
    font-family: "segoe ui", Verdana, Arial, Sans-Serif;
    font-size: 12px;
}

这篇关于获取输入元素的光标或文本位置像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！