如何让 Knockout JS 在按键上进行数据绑定而不是失去焦点？

小编典典

如何让 Knockout JS 在按键上进行数据绑定而不是失去焦点？

all

这个敲除 js的示例有效，因此当您编辑字段并按 TAB 时，视图模型数据以及字段下方的文本都会更新。

如何更改此代码以便每次按键都更新视图模型数据？

替代文字

<!doctype html>
<html>
    <title>knockout js</title>
    <head>
        <script type="text/javascript" src="js/knockout-1.1.1.debug.js"></script>
        <script type="text/javascript">
        window.onload= function() {

            var viewModel = {
                firstName : ko.observable("Jim"),
                lastName : ko.observable("Smith")
            };
            viewModel.fullName = ko.dependentObservable(function () {
                return viewModel.firstName() + " " + viewModel.lastName();
            });

            ko.applyBindings(viewModel);
       }
        </script>
    </head>
    <body>
        <p>First name: <input data-bind="value: firstName" /></p>
        <p>Last name: <input data-bind="value: lastName" /></p>
        <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
    </body>
</html>

阅读 68

2022-07-14

共1个答案

小编典典

First name:

Last name:

Hello, !

从文档

附加参数

价值更新

如果您的绑定还包括一个名为 valueUpdate 的参数，这将定义 KO 应该使用哪个浏览器事件来检测更改。以下字符串值是最常用的选择：
* “change”（默认） - 当用户将焦点移动到不同的控件时更新您的视图模型，或者在元素的情况下，在任何更改后立即更新您的视图模型

* "keyup" - 当用户释放一个键时更新你的视图模型

* "keypress" - 当用户输入一个键时更新你的视图模型。与 keyup 不同，这会在用户按住键时重复更新

* “afterkeydown” - 一旦用户开始输入字符，就会更新您的视图模型。这是通过捕获浏览器的 keydown
事件并异步处理事件来实现的。

在这些选项中，如果您想实时更新视图模型，“afterkeydown”是最佳选择。

2022-07-14