Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ alt htmlcssphpjsblog

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

Поддержи проект!!! smile

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

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

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

  1. Использование "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, либо ПКМ по полю и выбрать "вставить":

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


  2. Использование 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, либо ПКМ по полю и выбрать "вставить":

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


  3. Пример использования 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, либо ПКМ по полю и выбрать "вставить":

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


Последняя дата редактирования : 08.02.2021 15:58
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
onpastejs onpaste document onpasteсобытие onpasteonpaste eventonpaste javascript что означает событие onpaste

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
12/06/2021 10:04
Рад, что понравилось!Приходите ещё!
подробнее.
Марат :
12/06/2021 10:03
Есть наглядное редактирование на самой странице - где есть? достаточно дописать в адресной строке что-то -…
подробнее.
Знаток :
11/06/2021 11:37
Есть наглядяное редактирование на самой странице (типа в реальном временем)- достаточно дописать в адресной…
подробнее.
Сергей :
09/06/2021 05:20
Спасибо за статью. Отличная работа!
подробнее.
Марат :
19/05/2021 12:38
Справа есть соц сети.... напишите личное сообщение...На главной(пункт №5) они также…
подробнее.