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

【问题标题】：jQuery resize text box to fit contentsjQuery 调整文本框大小以适应内容
【发布时间】：2020-04-14 09:14:04
【问题描述】：

我有一个带有文本框的表单，这些文本框的大小可以变化很大。我正在尝试根据它们的内容调整它们的大小。

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

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

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

【问题讨论】：

标签： jquery textbox web-controls

【解决方案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 属性必须相同。

【讨论】：