JQuery с использованием event.preventDefault() с on ('input')

Я улавливаю события вставки с помощью $('selector').on('input', function(event) { ... });

Затем я пытаюсь проверить, что было вставлено, и если оно не пройдет проверку, отмените вставку с помощью event.preventDefault(). К сожалению, к тому моменту, когда функция слушателя выполнена, текст уже вставлен и event.preventDefault() ничего не делает.

Итак, какой хороший способ поймать события вставки, и если то, что было вставлено, не проверяет, отменяет/предотвращает вставку?

Я знаю, что могу использовать .on('paste', function(event) { ... }), но это не дает мне текст, который был вставлен, или содержимое входного элемента после вставки, если я не использую setTimeout() с некоторым минутным временем ожидания, d хотел бы избежать использования setTimeout().

ОТВЕТЫ

Ответ 1

Попробуйте использовать событие .change jquery.

Задайте значение пустым, если значение не удовлетворяет вашему условию.

Ответ 2

Прежде всего, некоторые сведения о порядке запуска событий для элемента input:

нажатие клавиши → нажатие клавиши → вставка → ввод → нажатие клавиши → изменить

Всякий раз, когда вы звоните preventDefault, он останавливает цепи, как будто ничего не произошло.

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

Я знаю, что могу использовать .on('paste', function (event) {...}), но это не дает мне текст, который был вставлен или содержание элемент ввода после вставки

На самом деле вы можете получить содержимое буфера обмена. Смотрите этот документ. Поддержка всех основных браузеров (но только IE11+). Я не знаю, была ли эта функция на момент написания вопроса доступной или нет.

Пример скрипки

$('#myInput').on('paste', function(e) {
    // Cancel the event - this prevents the text from being entered into the input and stops the event chain
    e.preventDefault();

    // Get the content of the clipboard
    let paste = (event.clipboardData || window.clipboardData).getData('text');

    // Validate what it is pasted       
    if (paste == "text to paste") {
        // If condition is satisfied manually set the value of the input
        $(this)
            .val(paste)
            // Manually trigger events if you want
            .trigger('input')
            .trigger('change');
    }
});

Примечания к коду:

  • Это решение не включает setTimeout. Всякий раз, когда вы делаете это с setTimeout, вы очень быстро видите вставляемый текст, как мигающий эффект.
  • Если текст соответствует условию, я вручную устанавливаю его в input. Однако это не вызывает события input и change. Если они вам нужны, просто включите их вручную
  • Аналогичный подход заключается в том, чтобы сначала проверить текст и, если он не соответствует требованиям, вызвать preventDefault, в противном случае ничего не делать. Таким образом, вы избегаете ручного задания значения на входе и последующего запуска событий.

Ответ 3

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

$('selector').on('input', function(event) { ... });

и в случае, если проверка не прошла , удаление вставленного текста мне подходит.

К сожалению, доступ к буферу обмена имеет некоторые недостатки (браузер спрашивает, разрешено ли проверять буфер обмена, кросс-браузерную совместимость и т.д.)

Если вы согласны с сохранением последнего значения ввода, вставленный текст можно рассчитать в любом случае.

Вот мой подход к вычислению вставленного текста

https://jsfiddle.net/f710o9qd/2/

Я надеюсь, что это поможет вам :)

(Не стесняйтесь уточнить расчет вставленного текста, если вы обнаружите какие-либо недостатки)

Ответ 4

Мое понимание вопроса заключается в том, что мы не должны позволять вставлять данные в текстовое поле до тех пор, пока оно не пройдет конкретную проверку. Вместо использования event.preventDefault() мы можем зафиксировать значение, когда пользователь вводит какой-либо контент, используя on('input') прослушиватель и проверяя его на конкретное условие, и если проверка не удалась, запустите значение текстового поля.

(Это обходное решение, если нам еще нужно использовать on('input') прослушиватель событий)

Пример кода (я использую console.log() для печати вставленного значения):

HTML

<input type='text' id="selector" />

JS

$(document).ready(function() {
 $('#selector').on('input', function (e){
        if(e.target.value !== "myValue"){
        $('#selector').val('');
    }
    else{
        console.log(e.target.value);
    }
 });
});