【问题标题】:KnockoutJS: How to update view model after a user copy'n'paste into a text field?KnockoutJS:用户复制'n'粘贴到文本字段后如何更新视图模型?
【发布时间】:2012-06-21 23:40:37
【问题描述】:

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

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

valueUpdate: 'afterkeydown'

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

valueUpdate: ['afterkeydown','mouseup']

但这不起作用,当我尝试通过视图模型读取文本框的值时我一直在获取旧值,直到我从输入文本框跳出。 p>

有人知道我该如何解决这个问题吗?

奥斯卡

【问题讨论】:

标签: javascript html knockout.js


【解决方案1】:

您可以使用 valueUpdate:'input'。我已经测试它可以在 Opera、Firefox 和 Chrome 中工作。我在 Linux 机器上,所以我无法在 IE 中测试它。 Check this fiddle

更新:我现在在 IE8 中测试它,但它不起作用。但是使用以下方法似乎可行。

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

感谢 Michael Best 对此的评论 :) 我已更新 the fiddle

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

【讨论】:

  • valueUpdate: ['afterkeydown','propertychange','input'] 涵盖了所有基础(除了在 IE9 中使用鼠标删除,它不会触发任何事件,因此无法处理)。
  • 现在有了 textInput 绑定。​​
【解决方案2】:

新方式

代替:

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

现在可以使用textInput binding

data-bind="textInput: myValue"

来自文档:

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

老路

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

如果要支持 RightMouseClickDeleteRightMouseClickCut,则在 IE9 中不起作用。

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

valueUpdate: 'textchange'

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

valueUpdate: ['input', 'textchange']

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

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

【讨论】:

猜你喜欢
  • 2014-04-14
  • 1970-01-01
  • 2013-05-30
  • 2012-06-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多