我有一个带有文本框的表单,其大小可能相差很大。我正在尝试根据其内容调整它们的大小。
我一直在研究各种解决方案,并将其归结为:
$("input[type=text]").width($(this).val().length)
在我看来,这应该可行。有人可以告诉我为什么不可以吗?谢谢。
最佳答案
它可以工作,但默认情况下使用 .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" />
关于jQuery 调整文本框大小以适合内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59449262/