在 Internet Explorer 中按下 Enter 键后如何更新 observable答案

【问题标题】：How to update observable after Enter key pressed in the Internet Explorer在 Internet Explorer 中按下 Enter 键后如何更新 observable
【发布时间】：2016-07-27 03:39:02
【问题描述】：

HTML 代码

<input type="text" data-bind="value: nextName">

可观察

nextName: KnockoutComputed<string>;
currentName: KnockoutObservable<string>;

constructor()
{
    this.nextName = ko.pureComputed(
    {
        read: () => this.currentName(),
        write: (value: string) =>
        {
           this.currentName(value);
           if ((value) && value.trim().length > 0)
              this.runSearch();
        }
    }, this);
}

用户按下回车后 - 例如，在 Chrome 中搜索将正常执行，但在 Internet Explorer 中则不执行。
我尝试使用与valueUpdate:'afterkeydown' 的绑定，但这将在每个字符之后执行搜索——这不是我想要实现的。

【问题讨论】：

标签： knockout.js data-binding typescript

【解决方案1】：

我使用了这个 polyfill - 根本问题是当按下 Enter 键时 IE 不会触发 change 事件。

var isIE = !!document.documentMode;
if (isIE) {

    $("body").on("keydown", "input[type='text']", function (e) {

        // Ensure 'value' binding is fired on enter in IE
        if ((e.keyCode || e.which) === 13) {
            $(this).blur();
        }
    });
}

【讨论】：

【解决方案2】：

您可以使用textInput 绑定并为enterkey 创建一个custom Knockout binding 来做您想做的事情：
textInput 在viewmodel 属性和元素的值之间提供双向更新。它提供autocomplete、drag-and-drop 和 clipboard 事件的实例更新。然后，您可以使用enterkey 绑定在每次用户按下回车键时调用您的函数，这在 IE 中也应该可以工作。

 <input type="text" data-bind="textInput: nextName,enterkey: function() {runSearch()}">

自定义敲除绑定：

ko.bindingHandlers.enterkey = {
    init: function (element, valueAccessor, allBindings, viewModel) {
        var callback = valueAccessor();
        $(element).keypress(function (event) {
            var keyCode = (event.which ? event.which : event.keyCode);
            if (keyCode === 13) {
                callback.call(viewModel);
                return false;
            }
            return true;
        });
    }
};

工作示例：http://jsfiddle.net/GSvnh/5124/

【讨论】：