У меня есть jquery tagken tagit plugin, и я хочу привязать к событию вставки, чтобы правильно добавлять элементы.
Я могу привязываться к событию вставки так:
.bind("paste", paste_input)
...
function paste_input(e) {
console.log(e)
return false;
}
Как получить фактическое значение вставленного содержимого?
В современных браузерах работает событие onpaste. Вы можете получить доступ к вставленным данным, используя getData функцию на clipboardData объекте.
$("#textareaid").bind("paste", function(e){
// access the clipboard using the api
var pastedData = e.originalEvent.clipboardData.getData('text');
alert(pastedData);
} );
Обратите внимание, что bind и unbind устарели с jQuery 3. Предпочтительный вызов - on.
Все современные браузеры поддерживают API буфера обмена.
Смотрите также: В Jquery Как обрабатывать пасту?
Как насчет этого: http://jsfiddle.net/5bNx4/
Используйте .on, если вы используете jq1.7 и другие.
Поведение: Когда вы вводите что-либо или paste что-либо на 1-м текстовом поле, чайная комната ниже захватывает cahnge.
Отдых, надеюсь, это поможет делу. :)
Полезная ссылка = >
Как вы обрабатываете oncut, oncopy и onpaste в jQuery?
код
$(document).ready(function() {
var $editor = $('#editor');
var $clipboard = $('<textarea />').insertAfter($editor);
if(!document.execCommand('StyleWithCSS', false, false)) {
document.execCommand('UseCSS', false, true);
}
$editor.on('paste, keydown', function() {
var $self = $(this);
setTimeout(function(){
var $content = $self.html();
$clipboard.val($content);
},100);
});
});
Недавно мне нужно было что-то подобное. Я использовал следующий дизайн для доступа к элементу и значению пасты. jsFiddle demo
$('body').on('paste', 'input, textarea', function (e)
{
setTimeout(function ()
{
//currentTarget added in jQuery 1.3
alert($(e.currentTarget).val());
//do stuff
},0);
});
Другой подход: это input событие будет перехватывать также событие paste.
$('textarea').bind('input', function () {
setTimeout(function () {
console.log('input event handled including paste event');
}, 0);
});
$(document).ready(function() {
$("#editor").bind('paste', function (e){
$(e.target).keyup(getInput);
});
function getInput(e){
var inputText = $(e.target).html(); /*$(e.target).val();*/
alert(inputText);
$(e.target).unbind('keyup');
}
});
Вы можете сравнить исходное значение поля и измененное значение поля и вычесть разницу в качестве вставленного значения. Это правильно вставляет вложенный текст, даже если в поле есть существующий текст.
function text_diff(first, second) {
var start = 0;
while (start < first.length && first[start] == second[start]) {
++start;
}
var end = 0;
while (first.length - end > start && first[first.length - end - 1] == second[second.length - end - 1]) {
++end;
}
end = second.length - end;
return second.substr(start, end - start);
}
$('textarea').bind('paste', function () {
var self = $(this);
var orig = self.val();
setTimeout(function () {
var pasted = text_diff(orig, $(self).val());
console.log(pasted);
});
});
Казалось бы, если это событие имеет некоторое прикрепленное к нему свойство clipboardData (оно может быть вложено в свойство originalEvent). clipboardData содержит массив элементов, и каждый из этих элементов имеет функцию getAsString(), которую вы можете вызвать. Это возвращает строковое представление того, что находится в элементе.
Эти элементы также имеют функцию getAsFile(), а также некоторые другие, специфичные для браузера (например, в браузерах webkit, есть функция webkitGetAsEntry()).
В моих целях мне понадобилось строковое значение того, что вставляется. Итак, я сделал что-то похожее на это:
$(element).bind("paste", function (e) {
e.originalEvent.clipboardData.items[0].getAsString(function (pStringRepresentation) {
debugger;
// pStringRepresentation now contains the string representation of what was pasted.
// This does not include HTML or any markup. Essentially jQuery $(element).text()
// function result.
});
});
Вы хотите выполнить итерацию через элементы, сохраняя результат конкатенации строки.
Тот факт, что есть массив элементов, заставляет меня думать, что потребуется больше работы, анализируя каждый элемент. Вы также захотите выполнить некоторые проверки нулевого значения.
Эта работа над всем браузером для вставки значения. А также для создания общего метода для всего текстового поля.
$("#textareaid").bind("paste", function(e){
var pastedData = e.target.value;
alert(pastedData);
} )
В современных браузерах это просто: просто используйте событие ввода вместе с атрибутом inputType:
$(document).on('input', 'input, textarea', function(e){
if (e.originalEvent.inputType == 'insertFromPaste') {
alert($(this).val());
}
});