敲除 textInput 和 maskedinput 插件答案

【问题标题】：Knockout textInput and maskedinput plugin敲除 textInput 和 maskedinput 插件
【发布时间】：2015-05-22 22:06:43
【问题描述】：

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

使用masked input 插件可以工作，但是我丢失了 Knockout 的“textInput:”提供的“as-you-type”更新，因此脚本的其他部分只能在字段失去焦点后看到更改（实际上在 Knockout 中表现为普通的旧“值：”绑定）。

使用计算 observable 进行格式化的简单解决方案不起作用，因为每次击键都会更新自身的字段会将输入焦点更改为页面中的其他位置，因此用户无法继续输入。

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

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

【问题讨论】：

标签： javascript jquery knockout.js maskedinput

【解决方案1】：

我写了一个只使用计算 observable 的小提琴，我没有焦点问题。这是否如您所愿？

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/

【讨论】：

看起来你不能在最后添加任何东西（例如“.00”）而不移动光标并弄乱一切（包括退格）。这与我之前看到的行为不完全相同，但似乎是相关的。
每次重写值时，光标都位于末尾。如果您要添加到末尾，这很好，但如果您在中间进行编辑，则会出现问题。将光标定位在字段内可能会很棘手，具体取决于格式。
我猜我遇到的焦点问题与 KO 的 foreach 有关（我在一个表中有多个输入）。当我的表单不循环并且我不希望用户在中间插入一些东西时，我将使用你的解决方案（如果我在每次击键后自动添加美分，任何数字都需要在中间进行编辑......）
好的，当我使用 foreach 和模板的组合时，我的焦点问题出现了。可能这值得另一个问题（或错误报告......）