获取输入元素的像素的光标或文本位置

Question

IE允许我在输入元素中创建一个文本范围,我可以在其上调用getBoundingClientRect()并获取某个字符或光标/插入符号的像素位置.有没有办法在其他浏览器中以像素为单位获取某个角色的位置？

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?
}

我正在使用jQuery,但我怀疑它能否解决我的问题.我期待一个纯JavaScript解决方案,如果有的话,但欢迎jQuery的答案.

Answer 1

演示
我编写了一个行为符合预期的函数.这里可以找到一个非常详细的演示面板:小提琴:http://jsfiddle.net/56Rep/5/
演示中的界面是不言自明的.

问题中要求的功能将在我的功能中实现如下:
    var pixelPosition = getTextBoundingRect(input, 6)

函数依赖
更新:该函数是纯JavaScript,不依赖于任何插件或框架!
该函数假定该getBoundingClientRect方法存在.文本范围在支持时使用.否则,使用我的函数逻辑实现功能.

函数逻辑
代码本身包含几个注释.这部分更详细.

1. 创建一个临时 <div>容器.
2. <span>创建1 - 3个元素.每个跨度都包含输入值的一部分(偏移0到selectionStart,selectionStart到selectionEnd,selectionEnd到字符串的结尾,只有第二个跨度是有意义的).
3. input元素中的几个重要样式属性将复制到这些<div>和<span>标记.仅复制重要的样式属性.例如,color不复制,因为它不会以任何方式影响角色的偏移.^#1
4. 在<div>被定位在的确切位置文本节点(输入的值).边框和内边距考虑在内,以确保临时<div>被正确定位.
5. 创建一个变量,它保存的返回值div.getBoundingClientRect().
6. 除非参数设置为true <div>,否则将删除临时debug值.
7. 该函数返回该ClientRect对象.有关此对象的更多信息,请参阅此页面.该演示还显示属性的列表:top,left,right,bottom,height和width.

^#1 :( getBoundingClientRect()和一些次要属性)用于确定输入元素的位置.然后,添加填充和边框宽度,以获得文本节点的实际位置.

已知问题
当getComputedStyle返回错误的值时遇到了唯一的不一致情况font-family:当页面未定义font-family属性时,computedStyle返回不正确的值(即使Firebug遇到此问题;环境:Linux,Firefox 3.6.23,字体"Sans Serif").

在演示中可见,定位有时略微偏离(几乎为零,始终小于1像素).

技术限制可防止脚本在移动内容时获取文本片段的确切偏移量,例如,当输入字段中的第一个可见字符不等于第一个值的字符时.

码

// @author Rob W       http://stackoverflow.com/users/938089/rob-w
// @name               getTextBoundingRect
// @param input          Required HTMLElement with `value` attribute
// @param selectionStart Optional number: Start offset. Default 0
// @param selectionEnd   Optional number: End offset. Default selectionStart
// @param debug          Optional boolean. If true, the created test layer
//                         will not be removed.
function getTextBoundingRect(input, selectionStart, selectionEnd, debug) {
    // Basic parameter validation
    if(!input || !('value' in input)) return input;
    if(typeof selectionStart == "string") selectionStart = parseFloat(selectionStart);
    if(typeof selectionStart != "number" || isNaN(selectionStart)) {
        selectionStart = 0;
    }
    if(selectionStart < 0) selectionStart = 0;
    else selectionStart = Math.min(input.value.length, selectionStart);
    if(typeof selectionEnd == "string") selectionEnd = parseFloat(selectionEnd);
    if(typeof selectionEnd != "number" || isNaN(selectionEnd) || selectionEnd < selectionStart) {
        selectionEnd = selectionStart;
    }
    if (selectionEnd < 0) selectionEnd = 0;
    else selectionEnd = Math.min(input.value.length, selectionEnd);

    // If available (thus IE), use the createTextRange method
    if (typeof input.createTextRange == "function") {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveStart('character', selectionStart);
        range.moveEnd('character', selectionEnd - selectionStart);
        return range.getBoundingClientRect();
    }
    // createTextRange is not supported, create a fake text range
    var offset = getInputOffset(),
        topPos = offset.top,
        leftPos = offset.left,
        width = getInputCSS('width', true),
        height = getInputCSS('height', true);

        // Styles to simulate a node in an input field
    var cssDefaultStyles = "white-space:pre;padding:0;margin:0;",
        listOfModifiers = ['direction', 'font-family', 'font-size', 'font-size-adjust', 'font-variant', 'font-weight', 'font-style', 'letter-spacing', 'line-height', 'text-align', 'text-indent', 'text-transform', 'word-wrap', 'word-spacing'];

    topPos += getInputCSS('padding-top', true);
    topPos += getInputCSS('border-top-width', true);
    leftPos += getInputCSS('padding-left', true);
    leftPos += getInputCSS('border-left-width', true);
    leftPos += 1; //Seems to be necessary

    for (var i=0; i<listOfModifiers.length; i++) {
        var property = listOfModifiers[i];
        cssDefaultStyles += property + ':' + getInputCSS(property) +';';
    }
    // End of CSS variable checks

    var text = input.value,
        textLen = text.length,
        fakeClone = document.createElement("div");
    if(selectionStart > 0) appendPart(0, selectionStart);
    var fakeRange = appendPart(selectionStart, selectionEnd);
    if(textLen > selectionEnd) appendPart(selectionEnd, textLen);

    // Styles to inherit the font styles of the element
    fakeClone.style.cssText = cssDefaultStyles;

    // Styles to position the text node at the desired position
    fakeClone.style.position = "absolute";
    fakeClone.style.top = topPos + "px";
    fakeClone.style.left = leftPos + "px";
    fakeClone.style.width = width + "px";
    fakeClone.style.height = height + "px";
    document.body.appendChild(fakeClone);
    var returnValue = fakeRange.getBoundingClientRect(); //Get rect

    if (!debug) fakeClone.parentNode.removeChild(fakeClone); //Remove temp
    return returnValue;

    // Local functions for readability of the previous code
    function appendPart(start, end){
        var span = document.createElement("span");
        span.style.cssText = cssDefaultStyles; //Force styles to prevent unexpected results
        span.textContent = text.substring(start, end);
        fakeClone.appendChild(span);
        return span;
    }
    // Computing offset position
    function getInputOffset(){
        var body = document.body,
            win = document.defaultView,
            docElem = document.documentElement,
            box = document.createElement('div');
        box.style.paddingLeft = box.style.width = "1px";
        body.appendChild(box);
        var isBoxModel = box.offsetWidth == 2;
        body.removeChild(box);
        box = input.getBoundingClientRect();
        var clientTop  = docElem.clientTop  || body.clientTop  || 0,
            clientLeft = docElem.clientLeft || body.clientLeft || 0,
            scrollTop  = win.pageYOffset || isBoxModel && docElem.scrollTop  || body.scrollTop,
            scrollLeft = win.pageXOffset || isBoxModel && docElem.scrollLeft || body.scrollLeft;
        return {
            top : box.top  + scrollTop  - clientTop,
            left: box.left + scrollLeft - clientLeft};
    }
    function getInputCSS(prop, isnumber){
        var val = document.defaultView.getComputedStyle(input, null).getPropertyValue(prop);
        return isnumber ? parseFloat(val) : val;
    }
}

Answer 2

2016 更新：更现代的基于 HTML5 的解决方案是使用该contenteditable属性。

<div contenteditable="true">  <!-- behaves as input -->
   Block of regular text, and <span id='interest'>text of interest</span>
</div>

我们现在可以使用 jquery 找到跨度的位置offset()。当然，<span>标签可以预先插入或动态插入。

Answer 3

我最终从绝对定位且样式与输入类似的跨度中创建了一个隐藏的模拟输入。我将该范围的文本设置为输入值，直到我想要查找其位置的字符。我在输入之前插入跨度并获取它的偏移量：

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
}

我的 sizer 跨度的 css：

#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;
}