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

Z时代
2024-01-10
分类：问答

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

回答：

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

插件：

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