Question

如何使用jQuery自动调整input type =“text”字段的大小？我希望它在开始时像100px宽，然后在用户输入文本时自动加宽......这可能吗？

Answer 1

这是一个可以完成你所追求的插件：

插件：

(function($){

$.fn.autoGrowInput = function(o) {

    o = $.extend({
        maxWidth: 1000,
        minWidth: 0,
        comfortZone: 70
    }, o);

    this.filter('input:text').each(function(){

        var minWidth = o.minWidth || $(this).width(),
            val = '',
            input = $(this),
            testSubject = $('<tester/>').css({
                position: 'absolute',
                top: -9999,
                left: -9999,
                width: 'auto',
                fontSize: input.css('fontSize'),
                fontFamily: input.css('fontFamily'),
                fontWeight: input.css('fontWeight'),
                letterSpacing: input.css('letterSpacing'),
                whiteSpace: 'nowrap'
            }),
            check = function() {

                if (val === (val = input.val())) {return;}

                // Enter new content into testSubject
                var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,' ').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                testSubject.html(escaped);

                // Calculate new width + whether to change
                var testerWidth = testSubject.width(),
                    newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
                    currentWidth = input.width(),
                    isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
                                         || (newWidth > minWidth && newWidth < o.maxWidth);

                // Animate width
                if (isValidWidthChange) {
                    input.width(newWidth);
                }

            };

        testSubject.insertAfter(input);

        $(this).bind('keyup keydown blur update', check);

    });

    return this;

};

})(jQuery);

编辑：发现于：Is there a jQuery autogrow plugin for text fields?

Answer 2

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

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

 $('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 3

（已编辑：使用.text()方法代替.html()以使所有格式正确。）

您好我不知道您是否还在寻找但是当我在寻找一个脚本来做同样的事情时我遇到了这个问题。所以希望这可以帮助那些试图做到这一点的人，或类似的东西。

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。

由于

乔治

Answer 4

我在GitHub上有一个jQuery插件：https://github.com/MartinF/jQuery.Autosize.Input

它使用与seize的答案相同的方法，但在评论中提到了一些更改。

您可以在此处查看实时示例：http://jsfiddle.net/mJMpw/6/

示例：

<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' />

input[type="data-autosize-input"] {
  width: 90px;
  min-width: 90px;
  max-width: 300px;
  transition: width 0.25s;    
}

如果你想要一个很好的效果，你只需使用css设置最小/最大宽度并在宽度上使用过渡。

您可以指定结尾的空格/距离作为输入元素上data-autosize-input属性的json表示法中的值。

当然你也可以使用jQuery初始化它

$("selector").autosizeInput();

Answer 5

我使用seize's answer，但进行了以下更改：

在设置isValidWidthChange和// Animate width：
之间
```
if (!isValidWidthChange && newWidth > minWidth && newWidth > o.maxWidth) {
    newWidth = o.maxWidth;
    isValidWidthChange = true;
}
```
这样，当输入内容太大而无法容纳在最大宽度范围内时，输入会增大到你允许的范围。
$(this).bind('keyup keydown blur update', check);之后：
```
// Auto-size when page first loads
check();
```

Answer 6

看到这个jQuery插件： <删除> https://github.com/padolsey/jQuery.fn.autoResize

我刚用textareas测试它，它的工作原理！支持自动增长textareas，输入[type = text]和输入[type = password]。

UPD。看起来原作者从github中删除了回购。该插件在很长一段时间内没有更新，结果证明是非常错误的。我只能建议你找一个更好的解决方案。我之前向这个插件提出了一个拉取请求，所以我在我的github帐户中有a copy of it，只在你想改进它的情况下使用它，它不是防弹的！

此外，我发现ExtJS框架具有文本字段的自动调整功能，请参阅 grow 配置属性。虽然从框架中删除这一小块逻辑并不容易，但它可以为您提供一些关于该方法的好主意。

Answer 7

默认情况下，输入宽度由size参数控制，type="text"参数对应于应该宽的字符数。

由于这是以字符而非像素来衡量的，因此实际像素大小由使用中的（固定宽度）字体控制。

Answer 8

我只是想着同样的事情。当用户将文本写入文本框时，文本框应自行调整大小。我从未使用它，但我知道如何做到这一点。像这样：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>

  <table border="1">
  <tr>
    <td>
      <span id="mySpan">
        <span id="mySpan2"></span>
        <input id="myText" type="text" style="width:100%" onkeyup="var span = document.getElementById('mySpan2');var txt = document.getElementById('myText'); span.innerHTML=txt.value;">
       </span>
    </td>
    <td>
            sss
    </td>
  </tr>
</table>

  </body>
</html>

Answer 9

试用此代码：

var newTextLength = Math.floor($("input#text).val() * .80);
$("input#text").attr("size",newTextLength);

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

9 个答案: