动态更改输入文本框的字体大小以填充尺寸

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