javascript - Updating inner text live using jQuery

Question

I have a project on which I am working now. In this project I want to live update some buttons text. I used contenteditable="true" in my project. I have 2 solutions. The first one works ok, but I don't get what I wanted in the second one has a problem. In 2nd one I want when user press a key for long time, the text will show without releasing the key.
In the first one I used keyup event and in the second one I used the keydown event. I want when the keyup event happens the buttons' inner text will change to the new text.

Here is my first ones code (keyup):

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

jsfiddle.

Here is my second ones code (keydown):

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

jsfiddle.

Answer 1

试试input活动

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

Answer 2

用户输入的元素内容在事件发生时不一定已经更新keydown。这就是为什么它不会更新。

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