javascript - Knockout textInput 和 maskedinput 插件

标签 javascript jquery knockout.js maskedinput

有没有一种简单的方法来使用 data-bind="textInput: aProperty" 并在用户输入时添加输入掩码或一些自动格式化

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

使用计算可观察对象进行格式化的朴素解决方案不起作用,因为每次击键更新自身的字段都会将输入焦点更改到页面中的其他位置,因此用户无法继续输入。

我可以让这两个库相互配合,还是应该制作我的自定义解决方案?他们在事件处理程序中做了很多事情以与所有浏览器兼容,因此很难让它们一起工作也就不足为奇了,但这也是我不想摆弄所有这些 keyup、input 的原因, 改变, 事件由我自己。

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

最佳答案

我写了一个 fiddle ,它只使用一个计算的可观察量,而且我没有焦点问题。这是否按您预期的那样工作?

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/

关于javascript - Knockout textInput 和 maskedinput 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30406535/

相关文章:

Javascript 从下拉列表中隐藏项目

javascript - 切换选定的元素类

javascript - jQuery.text() 不适用于 textarea 元素

c# - ajax 中的 get 请求到 Controller 操作不起作用?

javascript - RequireJS with Knockout - 多次应用绑定(bind)

javascript - 带 knockout 的 RequireJs

javascript - 如何删除 JavaScript 中动态创建的音频元素?

javascript - 插入外部页面后更改所有href

javascript - javascript中的圆形分段 slider 控件

javascript - 使用 Knockout 绑定(bind) jQuery Mobile 小部件的属性