На моем сайте пользователи могут вставлять текст (в этом случае 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/
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/
Слушайте событие change, а также paste. change будет надежно запускаться в измененном поле перед отправкой, тогда как paste происходит только в браузерах, которые поддерживают его при явной пасте; это не будет вызвано другими действиями редактирования, такими как перетаскивание, вырезание, отмена повтора, проверка орфографии, замена IME и т.д.
Проблема с change заключается в том, что она не запускается сразу, только когда редактирование в поле завершено. Если вы хотите поймать все изменения по мере их возникновения, событие будет input... за исключением того, что это новая функция HTML5, которая не поддерживается везде (в частности: IE < 9). Вы могли бы почти сделать это, поймав все эти события:
$('.url').bind('input change paste keyup mouseup',function(e){
...
});
Но если вы хотите, чтобы каждый раз быстро обнаруживать каждое изменение в браузерах, которые не поддерживают input, у вас нет выбора, кроме как опросить значение на setInterval.
$('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');
});
Еще лучше использовать e.originalEvent.clipboardData.getData('text'); для извлечения вставленных данных;
$("input").on("paste", function(e) {
var pastedData = e.originalEvent.clipboardData.getData('text');
// ... now do with pastedData whatever you like ...
});
Таким образом, вы можете избежать тайм-аутов, и он поддерживается во всех основных браузерах.
Возможно, попробуйте использовать событие onblur. Таким образом, пользователь c/p во вход и когда они покидают поле, script проверяет, что там. Это может сэкономить массу хлопот, поскольку оно работает для мыши и ключа c/p, а также введенного вручную ввода.