Adjusting the size of an input type text when content change

Question

I have a basic input text where user can enter some numbers in it. As long as user type numbers, the input width is adjusted (bigger or smaller).

My problem : when the numbers are not directly typed but injected by code, the input width is not adjusted.

Any idea?

Here is a jsFiddle to reproduce the problem

1st: try to type something in the input text: you'll see this input width bigger.

2nd: try to click on the Ok button (which inject some numbers): you'll not see the input width changing.

Here is the basic code:

<input type="text" id="myField" size="5">
<input type="button"Value="Ok" data-bind="click: buttonClicked">


var ViewModel = function(first, last) {

    this.buttonClicked = function() {           
        $('#myField').val('123456789123456789123456789');
        alert('Some numbers are directly injected but the input text is not adjusted');
    }  
};

ko.applyBindings(new ViewModel()); 

function resizeInput() {
    $(this).attr('size', $(this).val().length);
}

$('input[type="text"]')
        // event handler
        .keyup(resizeInput)
        // resize on page load
        .each(resizeInput);

Thanks.

Answer 1

Just trigger the keyup event you already have in place:

$('#myField').val('123456789123456789123456789').trigger("keyup");

No further code changes required. http://jsfiddle.net/moob/LkqTU/13540/

Answer 2

Check this 1 :-

http://jsfiddle.net/QZBda/

        $('#myField').val('123456789123456789123456789');
        var a = $("#myField").val().length
        $("#myField").attr('size', a);
        alert(a);

Answer 3

You need to trigger a change event in the input field to run the resizeInput() function.

See this demo