0

一个快速的问题我正在尝试根据用户输入自动调整输入文本字段的大小，并且我在动态创建的输入文本字段中遇到了一些问题，而不是其他的正在运行。

这是javascript，我正在使用：

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

    $('input').autoGrowInput();

</script>

这就是我创建文本输入字段的方式：

                var tracktitleinput = document.createElement('input');
                tracktitleinput.setAttribute('type', "text");
                tracktitleinput.setAttribute('name', "tracktitle");
                tracktitleinput.setAttribute("required", true);
                tracktitleinput.setAttribute("placeholder",
                        "Required Field");
                tracktitleinput.setAttribute("class", "required");

它确实适用于这个：

<input type="text" id="releasename" name="releasename" required="true" placeholder="Required Field" />
4

2 回答 2

1

当您创建新输入时，您需要autoGrowInput()为这些元素调用函数：

var $newInput = $('<input/>', {
    type : 'text',
    name : 'tracktitle',
    required : 'true',
    placeholder : 'Required Field',
    class : 'required'
}).autoGrowInput();
于 2013-10-16T13:12:45.180 回答
0

如果您打电话时它们不存在，$('input').autoGrowInput();我不确定您为什么希望它们附加该功能。jQuery 并不神奇，它不会自动知道您在加载页面时运行的代码应该应用于当时不存在的元素，除非您明确告诉它（并且仅适用于通过事件委托的事件） .

创建动态添加的元素时，您需要再次调用插件：

$(tracktitleinput).autoGrowInput();
于 2013-10-16T13:11:47.560 回答