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

Question

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

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

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

在我看来，这应该是可行的。有没有人能告诉我为什么不是这样？谢谢。

Answer 1

它可以工作，但默认情况下，使用.width(参数)会自动将参数转换为像素。所以使用.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" />

​

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

​

注意：font-size /input的font-family和div属性必须相同。