淘汰赛自定义数字绑定

Question

我想使用这种技术:在knockout上创建一个仅输入数字类型

允许用户只输入数字.

但是,此技术不会更新UI上的可观察值.

HTML:

 <span data-bind="text: Interval" ></span>
 <input data-bind="numeric: Interval" />

捆绑:

ko.bindingHandlers.numeric = {
    init: function (element, valueAccessor) {
        $(element).on("keydown", function (event) {
            // Allow: backspace, delete, tab, escape, and enter
            if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                // Allow: Ctrl+A
                (event.keyCode == 65 && event.ctrlKey === true) ||
                // Allow: . ,
                (event.keyCode == 188 || event.keyCode == 190 || event.keyCode == 110) ||
                // Allow: home, end, left, right
                (event.keyCode >= 35 && event.keyCode <= 39)) {
                // let it happen, don't do anything
                return;
            }
            else {
                // Ensure that it is a number and stop the keypress
                if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                    event.preventDefault();
                }
            }
        });
    }    
};

因此,绑定不允许输入除数字之外的字符,但是当焦点丢失时input,相应的observable不会更新(因此span元素不会更改).

注意:

我不需要允许用户在输入中输入非数字字符.我知道有其他解决方案,如ko数字扩展,将所有内容转换为数字,但我不需要这个.我需要一个只允许输入数字的解决方案(包括退格等).

Answer 1

这将做你想要的:

<span data-bind="text: Interval" ></span>
<input data-bind="numeric, value: Interval" />

http://jsfiddle.net/mbest/n4z8Q/

Answer 2

仅数字数字的可靠路径是用户扩展器.

我们不必跟踪按键.在更新之前,更容易订阅observable来拦截值.然后我们可以做一些正则表达式,允许我们评估输入是否是数字.如果输入不是数字,我们将删除非数字字符.因此不允许非数字输入.

FIDDLE:

HTML

<input type="text" data-bind="value: myNum, valueUpdate: 'afterkeyup'" />

JS

(function(ko) {

    ko.observable.fn.numeric = function () {
        // the observable we are extending
        var target = this;

        // subscribe to the observable so we can
        // intercept the value and do our custom
        // processing. 
        this.subscribe(function() {
           var value = target();
           // this will strip out any non numeric characters
           target(value.replace(/[^0-9]+/g,'')); //[^0-9\.]/g - allows decimals
        }, this);

        return target;
    };

    function ViewModel() {
        this.myNum = ko.observable().numeric();
    };

    ko.applyBindings(new ViewModel());

})(ko);