Динамически изменить размер шрифта текстового поля ввода, чтобы заполнить размеры

Question

Я хочу изменить размер шрифта в <input type="text" size="10> динамически, чтобы заполнить поле. Вот некоторые примеры:

С меньшим количеством символов:

С большим количеством символов:

возможно ли это?

Answer 1

Я знаю, JQuery и JavaScript не были упомянуты или помечены, но то, что вы хотите, нужно будет JavaScript и JQuery.InputFit плагин будет делать именно то, что вы хотите:

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

Answer 2

Я немного поздно, чтобы это вопрос, но я хочу предложить решение в случае, если вы не хотите, чтобы реализовать 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