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

Question

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

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

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

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

Answer 1

它可以工作，但默认情况下使用 .width(parameter) 会自动将参数转换为像素。所以使用 .length 只会给你 1 个字符 = 1 个像素。

试试下面的演示，我添加了另一个输入字段，它使用乘法来进一步 add/specify 每个字符输入的长度；

$("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" />

Answer 2

如果根据文本长度计算宽度，当输入一些大小不同的字符时，解决方案可能会被破坏。喜欢：w vs 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 调整文本框大小以适应内容

jQuery resize text box to fit contents

jquery

textbox

web-controls