Modificare dinamicamente la dimensione del carattere di una casella di testo di input per riempire le dimensioni

Question

Vorrei modificare la dimensione del carattere in un <input type="text" size="10> in modo dinamico per riempire la casella. Ecco alcuni esempi:

Con meno caratteri:

Con più caratteri:

è possibile?

Answer 1

so JQuery e JavaScript non sono stati menzionati o etichettati, ma ciò che si desidera avrà bisogno di JavaScript, e il plugin JQuery.InputFit farà esattamente quello che vuoi:

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

Answer 2

Sono un po 'tardi per questo domanda, ma voglio offrire una soluzione nel caso in cui non si desidera implementare jQuery solo per questo:

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

check-out questa jsfiddle