设置输入文本类型宽度它的值大小

Question

http://jsfiddle.net/bDaGV/1/

是否有将输入文本类型的宽度设置为内部值的宽度？

CSS

input[type=text] {
  width:auto;
}

JS ：

$('input[type=text]').css('width', $(this).val());

Answer 1

您可以使用尺寸技巧

$('input[type=text]').attr('size', function() {
    return this.value.length;
});

FIDDLE

为了完整性，要使其“自动扩展”，您还需要一个事件处理程序

$('input[type=text]').on('keyup', function() {
    $(this).attr('size', this.value.length);
}).trigger('keyup');

FIDDLE

Answer 2

您可以使用contenteditable属性破解跨度，然后将其设置为看起来像输入：

<span class="input" contenteditable id="input1">ddd</span>
<style>
  span.input {
    border: thin black solid;
    padding: 2px 6px;
    background-color: #EEE;
  }
</style>

给定jQuery，很容易用$（'＃input1'）。text（）;

之类的东西来获取文本

这是一个小提琴：http://jsfiddle.net/JoeAndrieu/qYpAK/1/