javascript - 如何使用 KnockoutJS 将选定字段的文本更改为大写？

Question

我的应用程序所有者希望选择的文本字段为大写，就像打开大写锁定一样。我正在为这些字段使用带有可观察对象的 KnockoutJS View 模型。有没有一种方法可以有效地将任何用户输入的文本转换为大写？

我在我想更改的控件上放置了一个 input 事件，但发现虽然它有效，但 observables 没有更新。

<input type="text" maxlength="80" data-bind="value: colorName, disable: $parent.isReadOnly, event: { 'input': toUpper }" />

toUpper: function (d, e) {
    if (e.target) {
        if (e.target.value) {
            e.target.value = e.target.value.toUpperCase();
        }
    }
}

我也一直在考虑将 ucase CSS 类放在我想要大写的控件上，然后在客户端或服务器上，将这些字段保存为大写。

.ucase {
    text-transform: uppercase;
}

Answer 1

你可以扩展你的 observables -

<input data-bind="value: colorName, valueUpdate:'afterkeydown'" />

ko.extenders.uppercase = function(target, option) {
    target.subscribe(function(newValue) {
       target(newValue.toUpperCase());
    });
    return target;
};

var colorName = ko.observable().extend({ uppercase: true });

fiddle 示例 - http://jsfiddle.net/kbFwK/

基本上，只要值发生变化，它就会将可观察值的值转换为大写。

这里的缺点是它实际上改变了值并以这种方式存储它。您也可以出于显示目的将计算属性附加到可观察对象上。您可以使用 ko.computed、自定义绑定(bind)处理程序(因为它仅用于演示)或类似的东西来做到这一点。如果那是您正在寻找的更多内容，请通过评论告诉我。

编辑

使用 afterkeydown 更新 - http://jsfiddle.net/kbFwK/2/