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

onpaste javascript, оно же "paste" в js, или "Событие когда вставляют скопированный текст в поле ввода", сколько способов существует определить/отследить когда вставляют текст в поле ввода в javascript.

Подробно о "onpaste Event"

1. Использование "onpaste" внутри тега.
2. Использование onpaste + function
3. Пример использования paste + addEventListener

Использование "onpaste" внутри тега.

Одним из способов использования onpaste - размещение "onpaste" внутри тега.

Для того, чтобы продемонстрировать использование "onpaste" нам понадобится элемент Dom - пусть это будет div, и добавим ему class="onpaste" :

Также туда добавим событие "onpaste" с функцией myFunction:

<div onpaste="myFunction(event)" class="onpaste"></div>

Css:

Немного стилей для нашего блока:

.onpaste{
background: #e9e9e9;
width: 300px;
height: 100px;
margin: auto;
border: 1px solid;
}


Javascript

Напишем нашу функцию:

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Вы вставили текст в поле ввода";
}
</script>


Результат использования onpaste в теге:

Будем передавать - пусть это будет текст в отдельный div "Сигнал овставке текста в поле ввода".

Установите курсор мыши на поле ввода и нажмите сочетание клавиш ctrl + V, либо ПКМ по полю и выбрать "вставить":

Сигнал овставке текста в поле ввода




Использование onpaste + function

Второй способ использования onpaste равно function.

Нам опять понадобится div, внутрь добавим id, чтобы обратиться к тегу

<div id="theDIV" class="onpaste"></div>

В абзац "p" будем передавать полученные данные:

<p id="demo_1"></p>

Стили повторять не буду - см. выше.

Соберем скрипт:

<script>

document.getElementById("theDIV").onpaste = function(e) {

document.getElementById("demo_1").innerHTML = "Вы вставили текст в поле ввода";

};

</script>

Результат onpaste + function

Установите курсор мыши на поле ввода и нажмите сочетание клавиш ctrl + V, либо ПКМ по полю и выбрать "вставить":

Сигнал овставке текста в поле ввода




Пример использования paste + addEventListener

Следующий вариант использования onpaste, аналогичен первому, только здесь будем использовать paste + "addEventListener":

Html:

<div id="theDIV_2" class="onpaste"></div>

<p id="demo_2"></p>

Css:

Аналогичные первому пункту.

Javascript

<script>

document.getElementById("theDIV_2").addEventListener("paste", function(e) {

document.getElementById("demo_2").innerHTML = "Вы вставили текст в поле ввода";

});

</script>

Результат onpaste + addEventListener

Установите курсор мыши на поле ввода и нажмите сочетание клавиш ctrl + V, либо ПКМ по полю и выбрать "вставить":

Сигнал овставке текста в поле ввода