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

【问题标题】：Dynamically change the font size of an input text box to fill the dimensions动态更改输入文本框的字体大小以填充尺寸
【发布时间】：2013-05-20 16:01:48
【问题描述】：

我想将字体大小动态更改为<input type="text" size="10> 以填充框。下面是一些例子：

字符更少：

更多字符：

有可能吗？

【问题讨论】：

标签： html css forms text input

【解决方案1】：

我知道没有提及或标记 JQuery 和 JavaScript，但您需要 JavaScript，而 JQuery.InputFit 插件将完全满足您的需求：

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

【讨论】：

【解决方案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

【讨论】：

谢谢。如果输入框的宽度和高度是固定的，它可以更强大。然后它将被锁定...查看：jsfiddle.net/xfSuC/4