Событие перехвата в Javascript

Есть ли способ перехватить событие вставки в JavaScript и получить исходное значение, изменить его и установить соответствующее значение элемента DOM как измененное значение?

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

Возможно ли это?

Ответы

Ответ 1

Вы можете перехватить событие вставки, добавив обработчик "onpaste" и получив вставленный текст, используя "window.clipboardData.getData('Text')" в IE или "event.clipboardData.getData('text/plain')" в других браузерах.

Например:

var myElement = document.getElementById('pasteElement');
myElement.onpaste = function(e) {
  var pastedText = undefined;
  if (window.clipboardData && window.clipboardData.getData) { // IE
    pastedText = window.clipboardData.getData('Text');
  } else if (e.clipboardData && e.clipboardData.getData) {
    pastedText = e.clipboardData.getData('text/plain');
  }
  alert(pastedText); // Process and handle text...
  return false; // Prevent the default handler from running.
};

Как отмечает @pimvdb, вам нужно будет использовать "e.originalEvent.clipboardData", если использовать jQuery.

Ответ 2

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

Ответ 3

$(document).ready(function() {
    $("#editor").bind('paste', function (e){
        $(e.target).keyup(getInput);
    });

    function getInput(e){
        var inputText = $(e.target).val();
        alert(inputText);
        $(e.target).unbind('keyup');
    }
});

Ответ 4

Мне нужно было реализовать "обрезку" на все, что было вставлено (удалить все ведущие и завершающие пробелы), все еще позволяя использовать пробел.

Для Ctrl + V, Shift + Insert и мыши щелкните правой кнопкой мыши Paste, вот что я нашел в FF, IE11 и Chrome с 2017-04-22:

$(document).ready(function() {
    var lastKeyCode = 0;

    $('input[type="text"]').bind('keydown', function(e) {
        lastKeyCode = e.keyCode;
    });
    // Bind on the input having changed.  As long as the previous character
    // was not a space, BS or Del, trim the input.
    $('input[type="text"]').bind('input', function(e) {
        if(lastKeyCode != 32 && lastKeyCode != 8 && lastKeyCode != 46) {
            $(this).val($(this).val().replace(/^\s+|\s+$/g, ''));
        }
    });
});

Два оговорки:

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

  • Если пользователь вводит пробел или BS или Del, а затем пасты, обрезка не будет выполняться.