html - 入力テキスト ボックスのフォント サイズを動的に変更して、寸法を埋める

Question

<input type="text" size="10>ボックスを埋めるためにフォントサイズを動的に変更したいと思います。ここではいくつかの例を示します。

より少ない文字で：

より多くの文字で：

出来ますか？

Answer 1

この質問には少し遅れていますが、これだけのためにjqueryを実装したくない場合に備えて、解決策を提供したいと思います:

<p>A function is triggered when the user releases a key in the input field. The function transforms the characters size.</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">


function myFunction(){
var x=document.getElementById("fname");
    var initialSize=25-x.value.length;
    initialSize=initialSize<=10?10:initialSize;
x.style.fontSize = initialSize + "px";
}

このjsfiddleをチェックしてください