Paste

Событие "paste" в javascript. Разновидность "paste" - "onpaste ". Разберем с примерами!

О "paste" и "paste"

1. Что такое "paste" и "paste" - синтаксис.
2. Пример paste в реальном времени:
3. Пример onpaste в реальном времени:

Что такое "paste" и "paste" - синтаксис.

Начнем с определения, что такое событие "paste" :

Событие вставки срабатывает, когда пользователь инициирует действие вставки через пользовательский интерфейс браузера.

Синтаксис paste и paste - синтаксис.

Существует два варианта синтаксиса для "paste" и "onpaste"

addEventListener("paste", (event) => {});

onpaste = (event) => {};

Примечание:

Вообще, данный код "paste" - должен работать!

НО! Здесь одно но!

Вы никак не сможете определить, что "событие paste" было сделано!

Потому, что у данного кода есть проблема "получения данных после paste"...

obJ.addEventListener('paste', (event) => {

console.log('12345' + obJ.value);

});

Чтобы в этом разобраться давайте сделаем пример:

Пример paste в реальном времени:

Для того, чтобы сделать и получить результат работы "paste" вам понадобится:

Тег textarea с id :

<textarea id="editor"> </textarea>

Второй тег div для получения и вывода события "paste" с помощью innerHTML:

<div id="result"></div>

Javascript:

Как вы знаете, если использовать "id", то к нему можно обратиться напрямую...

editor.addEventListener('paste', (event) => {

//код

});

Далее... как я уже выше сказал, что у данного примера есть большой минус в том, что он не может в момент совершения "события paste" - получить результат данного действия! Поэтому - я приводил данную ссылку - теперь используем теорию с этой страницы(одной тысячной секунды вам хватит...):

setTimeout(function() {

//код

}, 1);

И вам осталось отправить полученные данные "событием past":

result . innerHTML = '<span style="color:red">' + editor.value + '</span>';

Соберем весь код вместе:

Код примера "paste"

Html:

<textarea id="editor"> </textarea>

<div id="result"></div>

Javascript:

<script>

editor.addEventListener('paste', (event) => {

setTimeout(function() {

result . innerHTML = '<span style="color:red">' + editor.value + '</span>';

}, 1);

});

</script>

Пример вывода кода "события paste"

Для того, чтобы увидеть событие paste - скопируйте любой текст и вставьте в ниже идущее поле "textarea".

result :

Пример onpaste в реальном времени:

Для того, чтобы выполнить "событие onpaste" - вам понадобится:

Теория и практика из первого пункта...

Чуть чуть "html" и "javascript" изменим и у нас получится код с "onpaste".

Соберем весь код:

Код примера "onpaste"

Html:

<h3>result_1:</h3>

<div id="result_1"></div>

Javascript:

<script>

function foo(){

setTimeout(function() {

result_1. innerHTML = editor_1.value ;

}, 1);

}

</script>

Пример вывода кода "события onpaste"

Для того, чтобы увидеть событие onpaste- скопируйте любой текст и вставьте в ниже идущее поле "textarea".

result_1: