jQuery 调整文本框大小以适应内容
Posted
技术标签:
【中文标题】jQuery 调整文本框大小以适应内容【英文标题】：jQuery resize text box to fit contents 【发布时间】：2020-04-14 09:14:04 【问题描述】：我有一个带有文本框的表单，这些文本框的大小可以变化很大。我正在尝试根据它们的内容调整它们的大小。
我一直在使用各种解决方案，并将其归结为：
$("input[type=text]").width($(this).val().length)
在我看来，这应该可行。有人可以告诉我为什么没有吗？谢谢。
【问题讨论】：
【参考方案1】：它可以工作，但默认情况下使用 .width(parameter) 会自动将参数转换为像素。所以使用 .length 只会给你 1 个字符 = 1 个像素。
试试下面的演示，我添加了另一个输入字段，它使用乘法来进一步添加/指定每个字符输入的长度；
$("input[type=text]").on("keypress", function()
$(this).width($(this).val().length);
);
$("input[type=text].add").on("keypress", function()
$(this).width($(this).val().length * 8);
);input
margin-bottom: 10px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Default" />
<br/>
<input class="add" type="text" placeholder="With Multiply" />【讨论】：
【参考方案2】：如果你根据文本长度计算宽度，当输入一些不同大小的字符时，解决方案可能会被打破。喜欢：w 与 i。
我的建议：从输入中获取值，将其添加到隐藏在 <body> 标签上的某个 div 中。根据div计算出文字宽度后，就可以更新输入宽度了。
$("input[type=text]").on('input', function (event)
var value = $(this).val();
var div = $('<div>').text(value).appendTo('body');
$(this).width(div.width());
);div
position: absolute;
visibility: hidden;
font-size: 12px;
font-family: Arial;
input
padding: 0 6px;
font-size: 12px;
font-family: Arial;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="text" />注意：div/input 的font-size 和font-family 属性必须相同。
【讨论】：
以上是关于jQuery 调整文本框大小以适应内容的主要内容，如果未能解决你的问题，请参考以下文章