使用 jQuery 实时更新内部文本

Updating inner text live using jQuery

我有一个项目正在做。在这个项目中,我想实时更新一些按钮文本。我在我的项目中使用了 contenteditable="true"。我有 2 个解决方案。第一个工作正常,但我没有得到我想要的东西,第二个有问题。在第二个中,我希望当用户长时间按下一个键时,文本将在不释放键的情况下显示。
在第一个中我使用了 keyup 事件,在第二个中我使用了 keydown 事件。我希望当 keyup 事件发生时,按钮的内部文本将更改为新文本。

这是我的第一个代码(keyup):

$('[contenteditable]').on('keyup', function() {
    $(this).closest('.code').prev().find('a').html($(this).html());
})

jsfiddle.

这是我的第二个代码(keydown):

$('[contenteditable]').on('keydown', function() {
    $(this).closest('.code').prev().find('a').html($(this).html());
})

jsfiddle.

用户正在输入的元素的内容不一定会在 keydown 事件发生时更新。这就是它不会更新的原因。

如果你使用keyup,你就不会有这个问题。

尝试 input 活动

$('[contenteditable]').on('input', function() {
  $(this).closest('.code').prev().find('a').html($(this).html());
})