KnockoutJS:如何将用户copy'n'paste到文本字段后更新视图模型?(

2019-07-30 01:18发布

我的工作网站用户输入在文本框中输入一些文字(类似于谷歌即时搜索)后自动填充表中的搜索结果上。

我设法得到淘汰赛JS来更新视图模型为用户通过添加输入信息

valueUpdate: 'afterkeydown'

进入我的数据绑定属性,但是,我还需要处理的情况下用户点击鼠标右键,一些文本粘贴到文本框,所以我尝试:

valueUpdate: ['afterkeydown','mouseup']

但没有工作,当我试图通过视图模型读取文本框的值, 我一直得到老的值,直到我选项卡了输入文本框

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

奥斯卡

Answer 1:

您可以使用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



Answer 2:

新方法

代替:

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?