在 Firefox 中使用 rateLimit 和 valueUpdate 的 Knockout 值绑定会删除最后输入的字母

Question

我创建了一个 JS Fiddle 来显示问题： https://jsfiddle.net/evanlarsen/e8bj9upf/7/

在文本框中键入内容时，它应该会在下方显示您键入的内容。这在 google chrome 浏览器中工作正常，但在使用 Firefox 时，无论您键入什么，最后一个字母都会被删除。

HTML

<div id="app">
  <input type="text" data-bind="value: value, valueUpdate: 'afterkeydown'" />
  <div data-bind="text: value"></div>
</div>

Javascript

const App = function(){
    this.value = ko.observable('');
  this.value.extend({ rateLimit: { timeout: 800, method: 'notifyWhenChangesStop' } });
}

const app = new App();
ko.applyBindings(app, document.getElementById('app'));

如何让 firefox 停止丢弃最后一个字母？我希望在每次按下按键后更新 observable，但也会限制更新，因此它不会在每次按键时更新，而是仅在 800 毫秒不再按键后更新。

Answer 1

尝试使用 'afterkeyup'，这能满足您的要求吗？

这个 post 有一个 JSFiddle，它可以帮助实现你想要的延迟，利用 rateLimit，在 800 毫秒；

Knockout.js delay valueUpdate: afterkeydown

Answer 2

无法在 Firefox 98.0 中重现该问题，但您最好还是使用 textInput 绑定。 docs.

里面其实是推荐的

所以：

<div id="app">
  <input type="text" data-bind="textInput: value" />
  <div data-bind="text: value"></div>
</div>

const App = function(){
  this.value = ko.observable('');
  this.value.extend({ rateLimit: 800 });
}

const app = new App();
ko.applyBindings(app, document.getElementById('app'));

https://jsfiddle.net/thebluenile/xydwpvez/

在 Firefox 中使用 rateLimit 和 valueUpdate 的 Knockout 值绑定会删除最后输入的字母

Knockout value binding with rateLimit and valueUpdate afterkeydown in Firefox is dropping the last typed letter

knockout.js