Dynamiczna zmiana rozmiaru czcionki wejściowego pola tekstowego w celu wypełnienia wymiarów

Question

Chciałbym dynamicznie zmienić rozmiar czcionki na <input type="text" size="10>, aby wypełnić pole. Oto kilka przykładów:

z mniej znaków:

Dzięki większej liczbie znaków:

jest to możliwe?

Answer 1

wiem JQuery i JavaScript nie zostały wymienione ani oznaczone, ale to, co chcesz trzeba JavaScript oraz wtyczki JQuery.InputFit zrobi dokładnie to, co chcesz:

<input type="text" name="younameit" id="input"> 
<script type="text/javascript"> 
$('input').inputfit(); 
</script> 

Answer 2

Jestem trochę późno na to pytanie, ale chcę zaoferować rozwiązanie w przypadku, gdy nie chcesz zaimplementować jQuery tylko do tego:

<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"; 
} 

Sprawdź tę jsfiddle