在淘汰赛JS中使用按键事件答案

【问题标题】：Using keypress event in knockout JS在淘汰赛JS中使用按键事件
【发布时间】：2013-09-24 16:56:46
【问题描述】：

我正在尝试读取 html 文本框的内容并从 API 获取数据以完成 google 样式的自动完成。我使用twitter bootstrap typeahead 来实现自动完成功能。为此，我需要在按键被按下时记录它们并使用查询文本进行 API 调用。

文本框的html是这样的

<input id="query" data-bind="value: query, valueUpdate: 'keypress', event: { keypress: check }"/>

我的假设是，一旦按下键，这将更新视图模型中的值，同时check 函数将调用 API。但是调用 check() 并且当用户键入时文本框永远不会被填充。如果 JS 看起来像这样 -

function check() {
    alert("Hello");     
    }

对于我按下的每个键，都会弹出 hello，但 HTML UI 中的文本框不显示按下的键/不记录按下的键。如何记录按键并同时发送请求？

【问题讨论】：

使用keyup 而不是keypress
它也适用于keypress，只需从您的处理程序返回true：function check() { alert("Hello"); return true; }
@divyanshm 欢迎乐于助人 :)
@divyanshm 我认为 tushar 有帮助，你应该现在发布答案并标记为答案。
这是旧线程，只是为了更新曾经访问过此的人，只需使用<input data-bind="textInput : variableName" Kevin M 的回答应该可以接受。

【解决方案1】：

如果可能的话，我会使用 console.log 而不是警报，并记录查询，以便确保值正在更新。 :) 你也想像这样记录事件

function check(data, event) {
    console.log(event);
}

这会告诉你你按下的键的键码

【讨论】：

【解决方案2】：

这个帖子很旧，但我注意到它没有提到使用 KO 的 textInput 绑定。这是v3.2.0新增的功能。

至少到目前为止（2015 年 1 月），KO 文档专门解决了这个问题：

虽然值绑定也可以在文本框和视图模型属性之间执行双向绑定，但当您想要即时实时更新时，您应该更喜欢 textInput。

【讨论】：