jquery - 自动缩放输入 [type=text] 到值的宽度？

Question

有没有办法缩放 <input type="text"> 的宽度？到实际值的宽度？

input {
  display: block;
  margin: 20px;
  width: auto;
}

<input type="text" value="I've had enough of these damn snakes, on this damn plane!" />

<input type="text" value="me too" />

Answer 1

您可以通过将 size 属性设置为输入内容的长度来轻松做到这一点:

function resizeInput() {
    $(this).attr('size', $(this).val().length);
}

$('input[type="text"]')
    // event handler
    .keyup(resizeInput)
    // resize on page load
    .each(resizeInput);

参见:http://jsfiddle.net/nrabinowitz/NvynC/

这似乎在右侧添加了一些填充，我怀疑这是依赖于浏览器的。如果你想让它对输入非常严格，你可以使用像 the one I describe in this related answer 这样的技术。 ，使用 jQuery 计算文本的像素大小。