Question

在Youtrack应用程序中，我发现他们使用了一些＆lt;李＆GT; input元素旁边的标签显示下划线，但我不知道它们如何检测输入元素内的文本位置。请在此处查看图片 enter image description here

Answer 1

在Firefox中，您可以使用textarea.selectionStart来检索插入位置。

这是一种在光标所在的地方插入虚拟字符并获取文本位置而不是光标的方法。

var area = document.getElementById("textareaID"); // the textarea 
area.focus(); // assign focus
var c = "{{#$%&{}"; // dummy string
var sel = document.selection.createRange();
var sel2 = sel.duplicate();
sel2 .moveToElementText(area);
sel.text = c;
pos = (sel2.text.indexOf(c));

或者这是一种跨浏览器方法，用于检查是否支持selectionStart

var pos = 0;

if("selectionStart" in el) {
    pos = el.selectionStart;
} else if("selection" in document) {
    el.focus();
    var Sel = document.selection.createRange();
    var SelLength = document.selection.createRange().text.length;
    Sel.moveStart("character", -el.value.length);
    pos = Sel.text.length - SelLength;
}
return pos;

jQuery还有其他插件可以操作插入符号。 http://plugins.jquery.com/caret/

以下是我遇到的几个jsFiddle演示

Answer 2

你可以试试这个逻辑

创建重复元素
使用输入框内容填充重复元素内容
计算重复元素的宽度（返回的宽度将是重复元素中文本的宽度）

请记住两个元素的字体大小，即文本框和重复元素应该相同： - DEMO

<input type="text" onkeyup="evaluates(this)" />

<强>的Javascript

function evaluates(dis)
{
 alert(getWidth(dis));   
}
function getWidth(dis)
{
    var prev = document.getElementById("created_one");
    if(prev)
        document.body.removeChild(prev);

    var value = dis.value;
    var box = document.createElement("span");
    box.setAttribute("id","created_one");
    box.style.width="auto";
    box.style.border = "0px"
    box.style.padding = "0px";
    box.style.visibility = "hidden";
    box.style.position = "absolute";
    box.style.zIndex = "-1";
    box.style.bottom = "0px";
    box.innerHTML = value;
    document.body.appendChild(box);
    return parseInt( box.offsetWidth );
}

Reference

Answer 3

这基本上是dcc和shadow的答案的组合。但也有一些修改使其真正起作用。

要使复制跨度与输入框中的文本具有完全相同的宽度，应考虑字体，并且跨度的white-space css属性应设置为pre以保留白色的宽度空间。

应考虑输入框的边距，填充和边框宽度。

这是demo。

和javascript代码：

var widthSpan;
function getPhraseStartPosition(input, currentPhraseIndex) {
    console.log(currentPhraseIndex);
    if (widthSpan == undefined) {       
        widthSpan = document.createElement("span");
        var $span = $(widthSpan);
        var $input = $(input);
        //make sure they share the same font
        $span.css("font-size", $input.css("font-size"));
        $span.css("font-family", $input.css("font-family"));
        $span.css("font-weight", $input.css("font-weight"));
        widthSpan.style.width="auto";
        widthSpan.style.border = "0px"
        widthSpan.style.padding = "0px";
        //to preserve white spaces in the span
        widthSpan.style.whiteSpace = "pre";
        widthSpan.style.visibility = "hidden";
        document.body.appendChild(widthSpan);
    }
    currentPhraseIndex = currentPhraseIndex == 0 ? 0 : currentPhraseIndex + 1;
    widthSpan.innerText = input.value.substring(0, currentPhraseIndex);
    var width = widthSpan.offsetWidth;
    return width;
}
function getPhraseIndex(input) {
    var caretIndex = 0;
    var value = input.value;
    if (input.selectionStart != undefined) {
        caretIndex = input.selectionStart;
    }
    else {
        var seletion = document.selection.createRange();
        seletion.moveStart("character", -value.length);
        caretIndex = seletion.text.length;
    }
    var currentPhraseIndex = 0;
    for (var i = 0; i < caretIndex; i++) {
        if (value.charAt(i) == ' ') currentPhraseIndex = i;
    }
    return currentPhraseIndex;
}
var shifting;
$(document).ready(function() {
    var $input = $("#test");
    shifting = parseInt($input.css("padding-left")) 
        + parseInt($input.css("margin-left")) + parseInt($input.css("border-left-width"));
    function changeMarker() {
        $("#marker").css("width", getPhraseStartPosition(this, getPhraseIndex(this)) + shifting);
    }
    $input.keyup(changeMarker);
    $input.click(changeMarker);
});

如何检测文本框中某些文本的位置？

3 个答案: