如何檢測文本框內某些文本的位置？

Question

在Youtrack應用程序中，我發現他們在輸入元素旁邊使用了一些< li>標籤來顯示下劃線，但我不知道他們如何檢測輸入元素中文本的位置。請在此處看到圖片

Answer 1

來到你可以試試這個邏輯

• 創建重複元件
• 填充與輸入框內容
• 計算寬度的重複元件的重複的元素的含量（返回的寬度將是重複的元素內的文本的寬度）

記住兩個要素，即文本框和重複元素的字體大小應該是相同的： - 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 2

在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演示的我遇到

• http://jsfiddle.net/tEnY8/4/
• http://jsfiddle.net/dandv/aFPA7/

Answer 3

這基本上是DCC和陰影的答案的組合。但也有一些修改，使其真正的工作。

1. 爲了使重複跨度得到完全相同的寬度，在輸入框中輸入文字，字體應考慮和跨度的white-space CSS屬性應該設置爲pre保存的空白寬度。
2. 應考慮輸入框的邊距，填充和邊框寬度。

這是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); 
});