テキスト入力の値のシフトを決定する方法は？

Question

入力の幅が内側の値より短い場合は、値の先頭だけが表示されます。矢印キー（左と右）を使用することで、キャレットを値の隠れた部分に移動できます。その場合、値は入力内でシフトされ、キャレットを囲む値の一部が表示されます。

最初の位置から見える部分のピクセル数を確認したいと思います。すべてのキーボードイベントでキャレットの位置を察知せずにこの値を得る簡単な方法はありますか？

Answer 1

要素の値の長さに応じて<input />のsize属性を設定できます。このような

何か：私は（近似による）文字列の画素の長さを決定するために、この関数を使用

document.getElementById('input').addEventListener('keyup', function(evt){ 
 
\t this.setAttribute('size', evt.target.value.length) 
 
})

<input type="text" name="email" size="5" id="input"/>

Answer 2

。しかし、ブラウザはテキストのスクロールが異なります。 EDGEは約3文字をスクロールしますが、Chromeは1文字だけをスクロールします。

function getPixelLengthOfString(element, string) { 
 
    var tempNode = document.createElement("span"); 
 
    tempNode.innerHTML = string; 
 
    tempNode.style.fontSize = window.getComputedStyle(element,null).getPropertyValue("font-size"); 
 
    document.body.appendChild(tempNode); 
 
    var stringPixelLength = tempNode.offsetWidth; 
 
    document.body.removeChild(tempNode); 
 
    return stringPixelLength; 
 
} 
 

 
console.log(getPixelLengthOfString(document.querySelector("input.length"), "wmj")); //approximate length of three characters

input.length { 
 
    width: 50px; 
 
}

<input type="text" class="length" value="this has a very long length" />