内容更改时调整输入类型文本的大小

Question

我有一个基本的输入文本，用户可以在其中输入一些数字。 只要用户键入数字，就可以调整输入宽度（更大或更小）。

我的问题 ：当数字不是直接键入而是通过代码注入时，输入宽度无法调整。

任何想法？

这是一个jsFiddle重现问题

第一：尝试在输入文本中输入内容：您会看到此输入宽度更大。

第二：尝试单击“确定”按钮（将注入一些数字）：您不会看到输入宽度发生变化。

这是基本代码：

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

谢谢。

Answer 1

只需触发您已经设置的keyup事件：

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

无需进一步的代码更改。 http://jsfiddle.net/moob/LkqTU/13540/

Answer 2

检查这个1：-

http://jsfiddle.net/QZBda/

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

Answer 3

您需要在input字段中触发change事件以运行resizeInput()函数。

看这个演示