Как получить входное значение в событии вставки?

На моем сайте пользователи могут вставлять текст (в этом случае url) в поле ввода. Я хотел бы захватить значение текста, который был вставлен с помощью jQuery. У меня есть это, чтобы работать в FF, используя приведенный ниже код, но он не работает в IE (я не думаю, что IE поддерживает событие "paste" ).

Кто-нибудь знает, как сделать эту работу во всех современных браузерах? Я нашел несколько других ответов на это на SO, но большинство из них только FF, и ни один из них не предлагает полного решения.

Вот код, который у меня есть до сих пор:

$("input.url").live('paste', function(event) {
    var _this = this;
    // Short pause to wait for paste to complete
    setTimeout( function() {
        var text = $(_this).val();
        $(".display").html(text);
    }, 100);
});

JSFiddle: http://jsfiddle.net/TZWsB/1/

ОТВЕТЫ

Ответ 1

jQuery имеет проблему с live-методом с вставкой-событием в IE; обходной путь:

$(document).ready(function() {
    $(".url").bind('paste', function(event) {
        var _this = this;
        // Short pause to wait for paste to complete
        setTimeout( function() {
            var text = $(_this).val();
            $(".display").html(text);
        }, 100);
    });
});

Fiddle: http://jsfiddle.net/Trg9F/

Ответ 2

Слушайте событие change, а также paste. change будет надежно запускаться в измененном поле перед отправкой, тогда как paste происходит только в браузерах, которые поддерживают его при явной пасте; это не будет вызвано другими действиями редактирования, такими как перетаскивание, вырезание, отмена повтора, проверка орфографии, замена IME и т.д.

Проблема с change заключается в том, что она не запускается сразу, только когда редактирование в поле завершено. Если вы хотите поймать все изменения по мере их возникновения, событие будет input... за исключением того, что это новая функция HTML5, которая не поддерживается везде (в частности: IE < 9). Вы могли бы почти сделать это, поймав все эти события:

$('.url').bind('input change paste keyup mouseup',function(e){
    ...
});

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

Ответ 3

$('input').on('paste', function(e) {
    // common browser -> e.originalEvent.clipboardData
    // uncommon browser -> window.clipboardData
    var clipboardData = e.clipboardData || e.originalEvent.clipboardData || window.clipboardData;
    var pastedData = clipboardData.getData('text');
});

Ответ 4

Еще лучше использовать e.originalEvent.clipboardData.getData('text'); для извлечения вставленных данных;

$("input").on("paste", function(e) { 
    var pastedData = e.originalEvent.clipboardData.getData('text');
    // ... now do with pastedData whatever you like ...
});

Таким образом, вы можете избежать тайм-аутов, и он поддерживается во всех основных браузерах.

Ответ 5

Возможно, попробуйте использовать событие onblur. Таким образом, пользователь c/p во вход и когда они покидают поле, script проверяет, что там. Это может сэкономить массу хлопот, поскольку оно работает для мыши и ключа c/p, а также введенного вручную ввода.