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

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