立即在文本輸入字段右側的位置div

我試圖立即在文本輸入字段中鍵入的文本右側放置一個div。對我來說，這看起來很簡單，就像獲取輸入的val的長度並將div定位到該值。但是，發生的情況是，只有在輸入字段中有1個字符的文本之後。隨着越來越多的輸入，偏移量變得越來越大。立即在文本輸入字段右側的位置div

我想創建的是一個建議框，它將完成正在鍵入的單詞。

我該如何定位它，以便在每個鍵盤上它的右邊和右邊的輸入值？

這裏是一個js小提琴：http://jsfiddle.net/ugkzdjsy/

這裏是如何我試圖將它定位在KEYUP：

$('input').on('keyup', function(){ 
    $('#suggestion').css('left', $(this).val().length+'rem'); 
}); 

No matter what units I try, px, em, rem, I get similar results.

來源

2014-12-12 wordSmith

它也不會與1個字符文本之後，它只是沒有足夠的在這一點上一個「大小錯誤」的通知。你天真地使用'rem'作爲尺寸單位，但這並不反映輸入字符的實際寬度，只是基於當前字體的標準寬度。您的整個當前方法無法工作，對不起，並且是[XY問題]的一個很好的示例（http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem）。你應該問一個關於如何解決你的問題的新問題，而不是要求嘗試（不可能）解決方案的幫助。 – 2014-12-12 23:58:23

你必須計算文本的寬度，然後設置left屬性。

這是一個JavaScript函數。

該函數創建一個span標籤給它的屬性相同的input標籤，追加input文本到span，然後追加span標籤DOM和使用.offsetWidth得到width。

$('input').on('keyup', function() { 
 
    $('#suggestion').css('left', width($(this).val()) + 1 + 'px'); 
 
}); 
 

 
function width(text) { 
 
    var s = document.createElement('span'); 
 
    var t = document.createTextNode(text) 
 
    s.appendChild(t); 
 
    s.id = 'length'; 
 
    s.style.fontSize = '1.2rem'; 
 
    s.style.visibily = 'hidden'; 
 
    s.style.opacity = '0'; 
 
    var m = document.getElementById('suggestion'); 
 
    for (i = 0; i < m.children.length; i++) { 
 
    if (m.children[i].id == 'length') { 
 
     m.removeChild(m.children[i]); 
 
    } 
 
    } 
 
    m.appendChild(s); 
 
    return (s.offsetWidth * 0.935 > document.getElementById('inpt').offsetWidth) ? document.getElementById('inpt').offsetWidth : s.offsetWidth * 0.935; 
 
};

html, 
 
body { 
 
    font-size: 16px; 
 
} 
 
input { 
 
    height: 2.618rem; 
 
    font-size: 1.2rem; 
 
} 
 
#suggestion { 
 
    height: 1.5rem; 
 
    width: 1.5rem; 
 
    position: relative; 
 
    background: #66bb6a; 
 
    color: #000000; 
 
    color: rgb(0, 0, 0); 
 
    font-family: 'Myriad Pro', 'Open Sans', sans-serif; 
 
    top: -35px; 
 
    z-index: 2; 
 
    overflow: hidden; 
 
    transition: all 0.2s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input id="inpt" type="text" val="leonardo" /> 
 
<div id="suggestion"></div>

來源

2014-12-13 00:34:54

現在，它涵蓋了一些字母。有時最後一個，有時更多。在這裏運行代碼片段或在這裏檢查：http://jsfiddle.net/ugkzdjsy/3/並鍵入mn ,, nmnmsdl，.fn或者其他很長的內容，然後您會看到它不完全是正確的，但，現在，稍微偏左一點。 – wordSmith 2014-12-13 13:16:49

立即在文本輸入字段右側的位置div

回答

相關問題