Question

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

我的问题：当数字没有直接输入但是通过代码注入时，输入宽度不会被调整。

有什么想法吗？

以下是重现问题的jsFiddle

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

第二：尝试点击Ok按钮（注入一些数字）：你不会看到输入宽度发生变化。

以下是基本代码：

<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

您需要在change字段中触发input事件才能运行resizeInput()功能。

See this demo

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

3 个答案: