Firefox 中与rateLimit 和 valueUpdate afterkeydown 绑定的淘汰值会删除最后输入的字母

发布于 2025-01-13 13:20:40 字数 815 浏览 3 评论 0原文

我创建了一个 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 停止删除最后一个字母？我希望在每次按键后更新可观察值，但同时也限制更新，这样它不会在每次按键时更新，而是仅在 800 毫秒不再按键后更新。

原文

I created a JS Fiddle to show the issue:
https://jsfiddle.net/evanlarsen/e8bj9upf/7/

When typing in the textbox it should show what you type just below it. This works fine in google chrome browser but when using Firefox the last letter of whatever you type gets dropped.

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'));

How can I get firefox to stop dropping the last letter? I would like to have the observable updated after every keydown but also throttle the update so its not updated on every key press but only after 800 milliseconds of no more key presses.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

_失温 2025-01-20 13:20:40

无法在 Firefox 98.0 中重现该问题，但您最好还是使用 textInput 绑定。实际上在文档中建议这样做。

所以：

<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/

Can't reproduce the issue with Firefox 98.0, but you're better off using the textInput binding anyway. It's actually recommended in the docs.

So:

<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/

回复收藏 0 原文