Обновление внутреннего текста в реальном времени с помощью 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

Попробуйте input событие

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

Answer 2

Содержимое элемента, который вводит пользователь, не обязательно будет обновляться во время keydown событие. Вот почему он не будет обновляться.

Если вы используете keyupу вас не будет этой проблемы.