Knockout textInput和maskedinput插件

时间:2015-05-22 22:06:44

标签: javascript jquery knockout.js maskedinput

是否有一种简单的方法可以使用data-bind="textInput: aProperty"并添加输入掩码或一些自动格式作为用户输入

使用masked input插件类的工作,但我失去了Knockout的“textInput:”提供的“as-you-type”更新,因此脚本的其他部分只在字段失去焦点后才能看到更改(在Knockout中有效地表现为普通的旧“值:”绑定)。

具有计算的observable的天真解决方案,格式化不起作用,因为每次更新自动字段的按键都会将输入焦点更改为页面中的其他位置,因此用户无法继续输入。

我可以让这两个库相互配合使用,还是应该制作自定义解决方案?他们在事件处理程序中做了很多事情,以便与所有浏览器兼容,因此很难让它们一起工作,但这也正是为什么我不想摆弄所有这些键盘,输入,改变,事件由我自己。

StackOverflow之前的所有答案都不介意在字段失去焦点后传播更改。也许这些答案是在textInput被添加到Knockout之前发布的,所以当时没有更好的东西。这就是我问一个新问题的原因。

1 个答案:

答案 0 :(得分:4)

我写过一个只使用计算可观察量的小提琴,我不会有焦点问题。这是否按预期工作?

var displayString = ko.observable('');
var formattedString = ko.computed({
    read: function () {
        return displayString();
    },
    write: function (newValue) {
        var f = format(newValue);
        console.debug("Format", newValue, "=", f);
        displayString(f);
    }
});

http://jsfiddle.net/csmmnq25/