使用 jQuery 实时更新内部文本

Question

我有一个项目正在做。在这个项目中，我想实时更新一些按钮文本。我在我的项目中使用了 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.

Answer 1

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

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

Answer 2

尝试 input 活动

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

使用 jQuery 实时更新内部文本

Updating inner text live using jQuery

javascript

jquery

live-update