我的工作网站用户输入在文本框中输入一些文字(类似于谷歌即时搜索)后自动填充表中的搜索结果上。
我设法得到淘汰赛JS来更新视图模型为用户通过添加输入信息
valueUpdate: 'afterkeydown'
进入我的数据绑定属性,但是,我还需要处理的情况下用户点击鼠标右键,一些文本粘贴到文本框,所以我尝试:
valueUpdate: ['afterkeydown','mouseup']
但没有工作,当我试图通过视图模型读取文本框的值, 我一直得到老的值,直到我选项卡了输入文本框 。
任何人都知道我是如何解决这个问题?
奥斯卡
您可以使用valueUpdate:“输入”。 我已经testet它在Opera,Firefox和Chrome浏览器。 我在Linux机器上,所以我不能在IE浏览器进行测试。 检查这个小提琴
更新:我现在已经在IE8 testet它,这是行不通的。 但是,使用以下似乎工作。
valueUpdate:['afterkeydown','propertychange','input']
感谢麦可思对他的这个评论:)我已经更新了小提琴
UPDATE十月2014:作为KZH提到在下面留言,在结合中加入为textInput Knockout.js的更高版本之一。 这种结合处理这种情况和已建立的浏览器怪癖处理http://knockoutjs.com/documentation/textinput-binding.html
新方法
代替:
data-bind="value: myValue, valueUpdate: ['input', 'textchange']"
现在人们可以利用为textInput结合 :
data-bind="textInput: myValue"
从文档:
在textInput
结合链接的文本框( <input>
)或文本区域( <textarea>
)与视图模型属性,提供视图模型属性和元素的值之间的双向的更新。 不同于value
结合, textInput
提供从DOM对所有类型的用户输入,包括自动完成,拖和下降,剪贴板事件的即时更新。
老方法
valueUpdate: ['afterkeydown','propertychange','input']
在IE9中,如果你想支持RightMouseClick→ 删除或RightMouseClick→ 剪切不起作用。
我想出了一个解决方案包括使用jQuery和jQuery插件叫做jQuery的锦绣Textchange 。 当你同时拥有jQuery和插件脚本加载,可以愉快地使用了“textchange”事件。
valueUpdate: 'textchange'
但是,我有一天可能会停止支持不好的浏览器,所以我有这样的:
valueUpdate: ['input', 'textchange']
下面是我对这个测试和其他活动取得了小提琴: http://jsfiddle.net/kaleb/w3ErR/
注意如果您正在使用requirejs,jQuery的可能是淘汰赛的硬依赖使其正常工作的所有时间。
文章来源: KnockoutJS: How to update view model after a user copy'n'paste into a text field?