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

Question 1

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

Question 2

这是一个插件，可以满足您的需求：

编辑：我已经按照Mathias的评论修复了插件。:)

在此处查看演示：http : //jsfiddle.net/rRHzY

插件：

(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);

Question 3

我在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();

Question 4

好插件，谢谢！我更改了两个似乎在我的项目中更有效的方法。

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

希望这可以帮助。

Question 5

只是想分享James出色插件的一些小改进。将此代码添加到tester元素的CSS声明中，以解决文本缩进：

textIndent: 0

没有它，在某些情况下，测试器元素可能会无意间继承了其他地方的文本缩进，从而降低了输入的大小。

像JP一样，我也想从一开始就将输入的大小调整为正确的大小，这与我稍有不同，方法是将“ trigger（'keyup'）”链接到autoGrowInput方法调用，例如：

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

附带说明一下，我注册该网站纯粹是为了评论James的解决方案，我很生气地发现我不能，因为我没有足够的声誉点。抱歉，如果我错过了一些事情，但这似乎意味着我必须在主要问题上发表这则评论，而不是更恰当地阐述詹姆斯的解决方案。

Question 6

我也换了

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

至

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

为了在浏览器重新渲染后立即调整大小。它将使该领域摆脱混乱。

Question 7

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

(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);

Question 8

如果您希望文本框在其中的字符串超出宽度时增长，那么类似的方法可能对您有用...它将检测文本框的size属性。如果字符串的长度超过该属性，则它将在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>

Question 9

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

Question 10

令人敬畏的插件James！谢谢。最后，我确实添加了JP的检查建议，尽管非常有效。

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

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

在isValidWidthChange的if检查下面，其中 widthexceeds = newWidth > o.maxWidth

Question 11

我创建了一个插件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');