Question

我找到了各种用于自动增加 textarea 的插件，但没有找到输入文本字段。有人知道是否存在吗？

Answer 1

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

编辑：我已根据Mathias的评论修复了该插件。：）

插件：

(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,'&nbsp;').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);

Answer 2

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

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

您可以在此处查看实时示例：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 3

好的插件，谢谢！我改变了两件似乎在我的项目中工作得更好的东西。

我将TESTER标记更改为DIV，以避免“意外调用方法或属性访问”。在IE8中（即使你的演示在IE8中有效。使用自定义HTML标签是否有特殊原因？
在代码结尾附近的绑定语句之后，我添加了对check（）的调用，以便在加载页面后立即调整文本框的大小，以防文本框在启动时已经包含内容。

希望这有帮助。

Answer 4

只是想与James的伟大插件分享一个小小的改进。将此代码添加到测试器元素的CSS声明中以考虑text-indent：

textIndent: 0

没有它，在某些情况下，tester元素可能会无意中从其他地方继承text-indent，从而丢掉了输入的大小。

和JP一样，我也希望从一开始就将输入调整到正确的大小，我只是略微不同，通过将“trigger（'keyup'）”链接到autoGrowInput方法调用，例如：

$('#contact_form').autoGrowInput({comfortZone: 7, minWidth: 10, maxWidth: 200}).trigger('keyup');

作为旁注，我注册了这个网站纯粹是为了评论詹姆斯的解决方案，我有点恼火，发现我不能，因为我没有足够的声誉点开始。对不起，如果我错过了什么，但这似乎意味着我必须发布这是对主要问题的评论，而不是更恰当地对詹姆斯的解决方案。

Answer 5

我也替换了

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

到

$(this).bind('keyup blur update', check).bind('keydown', function() {
    setTimeout(check);
});

为了在浏览器重新渲染字段后立即调整字段大小。这将使该领域摆脱一些喋喋不休。

Answer 6

我为类型文本的输入创建了一个插件，可以重新创建此行为。它还有其他一些独特的功能。您可以看到example并查看插件的documentation。 @james回答在将大文本粘贴到输入中时存在一些问题。为了解决这个问题，我对他的代码进行了一些修改。对于此示例，这是demo。

(function($){        
    $.fn.autoGrowInput = function(o) {

        o = $.extend({
            maxWidth: 200,
            minWidth: 1,
            comfortZone: 1,
          width: 1
        }, o);

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

            var minWidth = o.minWidth || $(this).width(),
                maxWidth = o.maxWidth,
                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,'&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                    testSubject.html(escaped);

                    // Calculate new width + whether to change
                    var testerWidth = testSubject.width(),
                    newWidth = testerWidth + o.comfortZone,
                    currentWidth = input.width();

                   if (testerWidth < minWidth) {
                       newWidth = minWidth;
                   } else if (testerWidth > maxWidth) {
                       newWidth = maxWidth;
                   } 

                   input.width(newWidth + o.comfortZone);  
            };

            testSubject.insertAfter(input);

            $(this).bind('input', check);

        });

        return this;

    };

})(jQuery);

Answer 7

如果你希望文本框在其中的字符串超出其宽度时增长，那么这样的东西可能适用于你...它会检测文本框的大小属性。如果字符串的长度超过该属性，它会将文本框扩展为keyup上字符串的长度。

在下面的脚本中，“＃test”是一个文本框ID。

<script language="javascript" type="text/javascript">
$(document).ready(function(){
    $("#test").keyup(function(){
        if($("#test").attr("size") < $("#test").val().length){
            size = $("#test").val().length;
            $("#test").attr("size",size);
        }
    })
});
</script>

Answer 8

在IE溢出中足够有趣：可见非常认真。您可以通过在输入元素上应用overflow：visible来实现此效果。不确定现代浏览器是否存在任何类似的CSS技巧。

Answer 9

Awsome插件詹姆斯！谢谢。我确实在最后添加了检查建议，虽然非常有效。

此外，我还添加了一些更改。如果更改的宽度超过maxWidth，我想将输入的大小设置为最大大小，所以我添加了：

else if (widthexceeds){
    input.width(o.maxWidth);
}

在if检查isValidWidthChange widthexceeds = newWidth > o.maxWidth

之下

Answer 10

我创建了一个名为input-autogrow的插件来为我自己的项目解决这个问题。这个插件最初是基于James的回答，但在很多方面都有所改进。

https://github.com/westonganger/input-autogrow

input-autogrow是一个用于自动增长输入的插件。这个插件与其他插件不同，因为大多数插件都是针对textarea标签，而这个库则针对输入标签。需要一个DOM库，如jQuery，Zepto或任何支持$ .fn插件的文件。

以下是一些使用示例。

/* Makes elements readonly if they already have the readonly attribute */
$('input.autogrow').inputAutogrow();

/* Manually trigger update */
$('input.autogrow').trigger('autogrow');
/* or */
$('input.autogrow').trigger('change');

/* Custom Options */
$('input.autogrow').inputAutogrow({maxWidth: 500, minWidth: 25, trailingSpace: 10});

/* Remove autogrow from input */
$('input.autogrow').inputAutogrow('destroy');

是否有用于文本字段的jQuery自动增长插件？

10 个答案: