Dynamically created text inputs doesn't resize width

Question

One quick question i am trying to auto-size the input text fields according to user inputs and i have some problems with the dynamically created input text ones, instead the others are functioning.

Here is the javascript , i am using:

<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>

this is how i create the text input fields :

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

and it does works perfectly with this ones :

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

Configure .autoGrowInput() for the dynamically created input also — Murali Murugesan
– Murali Murugesan, Commented Oct 16, 2013 at 13:10

Jason P · Accepted Answer · 2013-10-16 13:12:45Z

1

When you create new inputs, you need to call the autoGrowInput() function for those elements:

var $newInput = $('<input/>', {
    type : 'text',
    name : 'tracktitle',
    required : 'true',
    placeholder : 'Required Field',
    class : 'required'
}).autoGrowInput();

answered Oct 16, 2013 at 13:12

Jason P

27k3 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ducaz035 Over a year ago

how can i call in this example , var tracksubtitleinput = document .createElement('input'); tracksubtitleinput.setAttribute('type', "text"); tracksubtitleinput.setAttribute('name', "tracksubtitle"); i don t know how many input i will create before the user inputs it.

Jason P Over a year ago

@Ducaz035 Now that I look again, it looks like the autoGrowInput function may only work after the element has been appended to the DOM. Can you post how you do that?

Ducaz035 Over a year ago

Okay i found the way now , i should have call it after appending the div. thanks for your help

Anthony Grist · Accepted Answer · 2013-10-16 13:11:47Z

0

If they don't exist when you call $('input').autoGrowInput(); I'm not sure why you'd expect them to have that functionality attached to them. jQuery isn't magic, it doesn't automatically know that code you ran when the page loaded is supposed to apply to elements that didn't exist then, unless you explicitly tell it to (and that only works for events via event delegation).

You'll need to call your plugin again when creating the dynamically added elements:

$(tracktitleinput).autoGrowInput();

answered Oct 16, 2013 at 13:11

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

2 Comments

Ducaz035 Over a year ago

It doesn't work i tried like that var tracksubtitleinput = document .createElement('input'); tracksubtitleinput.setAttribute('type', "text"); tracksubtitleinput.setAttribute('name', "tracksubtitle"); tracksubtitleinput.setAttribute("onkeyup","autoGrowInput()"); $(tracksubtitleinput).autoGrowInput(); both of them don't work

Anthony Grist Over a year ago

@Ducaz035 Try adding it as part of the document before calling $(tracksubtitleinput).autoGrowInput();?

Collectives™ on Stack Overflow

Dynamically created text inputs doesn't resize width

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related