jQuery-自动输入文字大小（不是textarea！）

Question

如何使用jQuery自动调整输入类型=“文本”字段的大小？我希望它一开始的宽度为100像素，然后在用户输入文字时使其自动变宽……这可能吗？

Answer 1

我认为没有完美的解决方案，因为您无法检测输入到输入元素的文本的实际宽度。这完全取决于您使用的字体，浏览器中的缩放设置等。

但是，如果可以选择一种字体，在其中可以实际计算文本的像素数（这是最难的部分，但我想您可以尝试以某种方式进行估算）。您可以使用它来更改输入字段的宽度。

 $('input').keyup(function () {

     // I'm assuming that 1 letter will expand the input by 10 pixels

     var oneLetterWidth = 10;

     // I'm also assuming that input will resize when at least five characters

     // are typed

     var minCharacters = 5;

     var len = $(this).val().length;

     if (len > minCharacters) {

         // increase width

         $(this).width(len * oneLetterWidth);

     } else {

         // restore minimal width;

         $(this).width(50);

     }

 });

Answer 2

您好，我不知道您是否还在寻找，但是当我正在寻找一个脚本来做同样的事情时，我遇到了这个问题。因此，希望这对尝试这样做的人有所帮助。

function editing_key_press(e){

    if(!e.which)editing_restore(this.parentNode);

    var text = $('<span>')

        .text($(this).val())

        .appendTo(this.parentNode);

    var w = text.innerWidth();

    text.remove();

    $(this).width(w+10);

}

此代码的逻辑是将内容跨度放在页面上，然后获取此内容的宽度并将其删除。我确实遇到的问题是我必须让它同时在keydown和keyup上运行才能成功工作。

希望这会有所帮助，可能不会，因为我只是在短时间内进行jquery。