JSFiddle 不允许我设置输入值答案

【问题标题】：JSFiddle does not let me set input valueJSFiddle 不允许我设置输入值
【发布时间】：2015-11-09 16:51:33
【问题描述】：

我正在我的一个页面中实现 Jquery Numeric 框。我必须从具有最小值和最大值的用户那里获取数字输入。问题是我设置了最小值并尝试使用键盘输入值，它会自动显示最小值而不让我输入完整值。

例如在演示中：Demo Link Here

max = $this.spinner('option', 'max'),
min = $this.spinner('option', 'min');

Min 设置为 100，Max 设置为 1000，但如果我想从键盘输入 500，一旦我按 5，它会自动设置其值 100。

有人有同样的问题吗？

【问题讨论】：

能给个小提琴的链接吗
正在编辑我的问题，你正在快速询问链接... ;)
这是因为 keydown 会在按键被按下时做出反应。因此，它将 5 视为 keydown，并认为，“嘿，最小值是 100，而你正在输入 5！”。您可以改用“模糊”，但这意味着您需要先失去对输入字段的关注，然后再更新。 编辑： 显然你也在使用输入，基本上，使用 on('input') 按下的每个键都算作一次按键，所以使用模糊，以便等待用户失去输入字段的焦点.

标签： jquery jquery-ui spinner

【解决方案1】：

我对你的代码做了一些修改试试这个plunker:

HTML：

<input type="text" value="0" >

JS：

$("input").spinner({
    max: 1000,
    min: 100
}).on('blur', function () {
    if ($(this).data('onInputPrevented')) return;
    var val = this.value,

        $this = $(this),
        max = $this.spinner('option', 'max'),
        min = $this.spinner('option', 'min');

        // only allow numbers
       $(this).val($(this).val().replace(/[^0-9]/g, ''));

    // check input value
        if(val< 100 ){
            console.log(val.toString().length)
           if(val.toString().length == 1)
            $("input").val(val + 0 + 0);
            if(val.toString().length == 2)
                $("input").val(val + 0);


        }

});

【讨论】：

不完全是我想要的，但为您的支持竖起大拇指... :)

【解决方案2】：

我会将您代码中的.on('input'...) 更改为.on('blur'...)，并且仅在我知道用户“完成”输入他的输入之后才更改该值，而不是像您的示例中那样之前。

【讨论】：

但是如果我没有任何 .on('blur'...) 函数怎么办。在另一个我只有 $('#spinner_example').spinner({ min: 100, max: 1000, step: 1 });
所以只需在 .on('blur', function()...) 部分添加广告。 .spinner() 方法可以链接到任何其他 jQuery 方法。
得到了我需要的输出... :)