22

我正在开发一个网站,该网站在用户在输入文本框中输入一些文本后自动在表格中填充搜索结果(类似于谷歌即时搜索)。

当用户通过添加输入信息时,我设法让淘汰赛 js 更新视图模型

valueUpdate: 'afterkeydown'

但是,在我的数据绑定属性中,我还需要处理用户右键单击并将一些文本粘贴到文本框中的情况,所以我尝试了:

valueUpdate: ['afterkeydown','mouseup']

但这没有用,当我尝试通过视图模型读取文本框的值时,我一直在获取旧值,直到我从输入文本框中跳出

任何人都知道我该如何解决这个问题?

奥斯卡

4

2 回答 2

27

您可以使用 valueUpdate:'input'。我已经测试它可以在 Opera、Firefox 和 Chrome 中工作。我在 Linux 机器上,所以我无法在 IE 中测试它。检查这个小提琴

更新:我现在在 IE8 中测试了它,但它不起作用。但使用以下似乎有效。

valueUpdate:['afterkeydown','propertychange','input']

感谢 Michael Best 对此的评论 :) 我已经更新了小提琴

2014 年更新:正如 kzh 在下面的评论中提到的,在 Knockout.js 的更高版本之一中添加了 textInput 绑定。此绑定处理这种情况并内置浏览器怪癖处理 http://knockoutjs.com/documentation/textinput-binding.html

于 2012-06-19T21:15:56.863 回答
10

新方法

代替:

data-bind="value: myValue, valueUpdate: ['input', 'textchange']"

现在可以使用textInput 绑定

data-bind="textInput: myValue"

从文档中:

textInput绑定将文本框 ( )<input>或文本区域 ( <textarea>) 与 viewmodel 属性链接起来,在 viewmodel 属性和元素值之间提供双向更新。与value绑定不同,textInput它为所有类型的用户输入提供来自 DOM 的即时更新,包括自动完成、拖放和剪贴板事件。

老路

valueUpdate: ['afterkeydown','propertychange','input']

RightMouseClick如果您想支持→DeleteRightMouseClick→ ,则在 IE9 中不起作用Cut

我想出的解决方案涉及使用 jQuery 和一个名为jQuery Splendid Textchange的 jQuery 插件。在你加载了 jQuery 和插件脚本之后,你就可以愉快地使用 'textchange' 事件了。

valueUpdate: 'textchange'

但是,有一天我可能会停止支持坏浏览器,所以我有这个:

valueUpdate: ['input', 'textchange']

这是我为测试此事件和其他事件而制作的小提琴:http: //jsfiddle.net/kaleb/w3ErR/

注意如果您使用的是 requirejs,jquery 可能必须是敲除的硬依赖才能使其始终正常工作。

于 2013-11-13T15:03:54.297 回答