Dynamically change the font size of an input text box to fill the dimensions

Question

I'd like to change the font size into an <input type="text" size="10> dynamically to fill the box. Here are some examples:

With less chars:

With more chars:

Is it possible?

Answer 1

I know JQuery and JavaScript weren't mentioned or tagged, but what you want will need JavaScript, and the JQuery.InputFit plugin will do exactly what you want:

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

Answer 2

I'm a little late to this question, but I want offer a solution in case you don't want to implement jquery just for this:

<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 this jsfiddle