Блог

Главная - Вопросы по программированию - Событие изменения для текстовой области

Событие изменения для текстовой области

#javascript

#javascript

Вопрос:

У меня есть задача, в которую я должен иметь возможность вставить любой текст <textarea> , после чего текст будет немедленно отображен <p> . Я пытаюсь сделать это с addEventListener помощью, которая отлично работает с полем ввода, но по некоторым причинам не работает для текстовой области.

 let textArea = document.querySelector('.text-area')

let output = document.querySelector('.p-tag')

textArea.addEventListener('change', updateValue)

function updateValue(e){
    output.textContent = e.target.value
}

Комментарии:

1. Вместо этого вы можете использовать событие «onkeyup».

2. поэтому вместо этого используйте прослушиватель событий keyUp

3. Используйте input событие вместо keyup или change для лучшей совместимости с сенсорными устройствами, у которых нет «ключей».

4. Каким образом это работает с полем ввода, но не с текстовой областью? Поведение идентично предоставленному вами коду.

Ответ №1:

input Вместо этого используйте событие:

Примечание: input событие запускается каждый раз value , когда изменяется элемент. Это не похоже на change событие, которое срабатывает только при фиксации значения, например, при нажатии клавиши enter, выборе значения из списка параметров и т.п.

От change :

В зависимости от типа изменяемого элемента и способа взаимодействия пользователя с элементом change событие запускается в другой момент:

  • […]
  • Когда элемент теряет фокус после того, как его значение было изменено, но не зафиксировано (например, после редактирования значения <textarea> или <input type="text"> ).