自动缩放输入[type = text]到值的宽度？ [英] Auto-scaling input[type=text] to width of value?

问题描述

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

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

 < input type =text value =我已经有足够的这些死的蛇，在这个死的飞机！ />< input type =textvalue =me too/>  

解决方案

您可以通过将 size 属性设置为输入内容长度，

  function resizeInput（）{
 $（this）.attr（'size'，$（this）.val （）。长度）; 
} 
 
 $（'input [type =text]'）
 //事件处理程序
 .keyup（resizeInput）
 // resize on page load 
 .each（resizeInput）; 
  

查看： http://jsfiddle.net/nrabinowitz/NvynC/

这似乎在右边添加了一些填充，我怀疑是依赖于浏览器。如果你希望它对输入非常紧密，你可以使用我在这个相关答案中描述的那个，使用jQuery来计算文本的像素大小。

Is there a way to scale the width of an <input type="text"> to the width of the actual value?

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

解决方案

You can do this the easy way by setting the size attribute to the length of the input contents:

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

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

See: http://jsfiddle.net/nrabinowitz/NvynC/

This seems to add some padding on the right that I suspect is browser dependent. If you wanted it to be really tight to the input, you could use a technique like the one I describe in this related answer, using jQuery to calculate the pixel size of your text.

这篇关于自动缩放输入[type = text]到值的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！