jQuery 调整文本框大小以适合内容

Question

我有一个带有文本框的表单，其大小可能相差很大。我正在尝试根据其内容调整它们的大小。

我一直在研究各种解决方案，并将其归结为:

$("input[type=text]").width($(this).val().length)   

在我看来，这应该可行。有人可以告诉我为什么不可以吗？谢谢。

Answer 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" />