0

ユーザー入力に従って入力テキスト フィールドのサイズを自動調整しようとしている簡単な質問の 1 つですが、動的に作成された入力テキスト フィールドに問題があり、代わりに他のフィールドが機能しています。

これが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 に答える