Поймать ввод пасты
Я ищу способ очистки ввода, который я вставляю в браузер, это можно сделать с помощью jQuery?
Мне удалось придумать это до сих пор:
$(this).live(pasteEventName, function(e) {
// this is where i would like to sanitize my input
return false;
}
К сожалению, мое развитие застопорилось из-за этой "незначительной" проблемы. Я действительно сделал бы меня счастливым туристом, если бы кто-то мог указать мне правильное направление.
17 ответов
Я вроде исправил это с помощью следующего кода:
$("#editor").live('input paste',function(e){
if(e.target.id == 'editor') {
$('<textarea></textarea>').attr('id', 'paste').appendTo('#editMode');
$("#paste").focus();
setTimeout($(this).paste, 250);
}
});
Теперь мне просто нужно сохранить местоположение каретки и добавить к этой позиции, тогда я все готово... Я думаю:)
ОК, просто столкнулся с той же проблемой.. Я прошел долгий путь
$('input').on('paste', function () {
var element = this;
setTimeout(function () {
var text = $(element).val();
// do something with text
}, 100);
});
Просто маленький тайм-аут до.val() func может быть заполнен.
E.
Вы можете получить значение прямо из события. Это немного глупо, как добраться до него, хотя.
Верните false, если вы не хотите, чтобы он прошел.
$(this).on('paste', function(e) {
var pasteData = e.originalEvent.clipboardData.getData('text')
});
Для кросс-платформенной совместимости он должен обрабатывать события oninput и onpropertychange:
$ (something).bind ("input propertychange", function (e) {
// check for paste as in example above and
// do something
})
Хм... я думаю, что вы можете использовать e.clipboardData поймать данные вставляются. Если это не удастся, посмотрите здесь.
$(this).live("paste", function(e) {
alert(e.clipboardData); // [object Clipboard]
});
Прослушайте событие вставки и установите прослушиватель события keyup. В keyup перехватите значение и удалите прослушиватель событий keyup.
$('.inputTextArea').bind('paste', function (e){
$(e.target).keyup(getInput);
});
function getInput(e){
var inputText = $(e.target).val();
$(e.target).unbind('keyup');
}
$("#textboxid").on('input propertychange', function () {
//perform operation
});
Это будет работать нормально.
Это становится ближе к тому, что вы могли бы хотеть.
function sanitize(s) {
return s.replace(/\bfoo\b/g, "~");
};
$(function() {
$(":text, textarea").bind("input paste", function(e) {
try {
clipboardData.setData("text",
sanitize(clipboardData.getData("text"))
);
} catch (e) {
$(this).val( sanitize( $(this).val() ) );
}
});
});
Обратите внимание, что когда объект clipboardData не найден (в браузерах, отличных от IE), вы в настоящее время получаете полное значение элемента + значение буфера обмена.
Вероятно, вы можете сделать несколько дополнительных шагов, чтобы различать два значения, до ввода и после ввода, если вы действительно только после того, какие данные были действительно вставлены в элемент.
$('').bind('input propertychange', function() {....});
Это будет работать для события вставки мыши.
Этот код работает для меня, либо вставка с правого клика, либо прямая копия вставки
$('.textbox').on('paste input propertychange', function (e) {
$(this).val( $(this).val().replace(/[^0-9.]/g, '') );
})
Когда я вставляю Section 1: Labour Cost это становится 1 в текстовом поле.
Чтобы разрешить только значение с плавающей точкой, я использую этот код
//only decimal
$('.textbox').keypress(function(e) {
if(e.which == 46 && $(this).val().indexOf('.') != -1) {
e.preventDefault();
}
if (e.which == 8 || e.which == 46) {
return true;
} else if ( e.which < 48 || e.which > 57) {
e.preventDefault();
}
});
Как насчет сравнения исходного значения поля и измененного значения поля и вычета разности как вставленного значения? Это правильно фиксирует вставленный текст, даже если в поле уже есть текст.
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);
});
});
document.addEventListener('paste', function(e){
if(e.clipboardData.types.indexOf('text/html') > -1){
processDataFromClipboard(e.clipboardData.getData('text/html'));
e.preventDefault();
...
}
});
В дальнейшем:
Смотрите этот пример: http://www.p2e.dk/diverse/detectPaste.htm
Он обязательно отслеживает каждое изменение с помощью события oninput, а затем проверяет, является ли это вставкой по сравнению строк. О, и в IE есть событие onpaste. Так:
$ (something).bind ("input paste", function (e) {
// check for paste as in example above and
// do something
})
Скрипт для удаления специальных символов из всех полей с классом portlet-form-input-field:
// Remove special chars from input field on paste
jQuery('.portlet-form-input-field').bind('paste', function(e) {
var textInput = jQuery(this);
setTimeout(function() {
textInput.val(replaceSingleEndOfLineCharactersInString(textInput.val()));
}, 200);
});
function replaceSingleEndOfLineCharactersInString(value) {
<%
// deal with end-of-line characters (\n or \r\n) that will affect string length calculation,
// also remove all non-printable control characters that can cause XML validation errors
%>
if (value != "") {
value = value.replace(/(\x00|\x01|\x02|\x03|\x04|\x05|\x06|\x07|\x08|\x0B|\x0C|\x0E|\x0F|\x10|\x11|\x12|\x13|\x14|\x15|\x16|\x17|\x18|\x19|\x1A|\x1B|\x1C|\x1D|\x1E|\x1F|\x7F)/gm,'');
return value = value.replace(/(\r\n|\n|\r)/gm,'##').replace(/(\#\#)/gm,"\r\n");
}
}
Этот метод использует jqueries contents(). Unwrap().
- Во-первых, обнаружить событие вставки
- Добавьте уникальный класс к тегам, которые уже находятся в элементе, в который мы вставляем.
По истечении заданного времени ожидания просмотрите все содержимое, развернув теги, которые не имеют класс, который вы установили ранее. Примечание. Этот метод не удаляет самозакрывающиеся теги, такие как
Смотрите пример ниже.//find all children .find('*') and add the class .within .addClass("within") to all tags $('#answer_text').find('*').each(function () { $(this).addClass("within"); }); setTimeout(function() { $('#answer_text').find('*').each(function () { //if the current child does not have the specified class unwrap its contents $(this).not(".within").contents().unwrap(); }); }, 0);
Это оказалось довольно призрачным. Значение ввода не обновляется до выполнения кода внутри функции события вставки. Я попытался вызвать другие события из функции вставки события, но входное значение по-прежнему не обновляется вставленным текстом внутри функции каких-либо событий. Это все события, кроме keyup. Если вы вызываете keyup из функции события вставки, вы можете очистить вставленный текст из функции события keyup. вот так...
$(':input').live
(
'input paste',
function(e)
{
$(this).keyup();
}
);
$(':input').live
(
'keyup',
function(e)
{
// sanitize pasted text here
}
);
Здесь есть одна оговорка. В Firefox, если вы сбрасываете вводимый текст в каждой клавише, если текст длиннее, чем видимая область, разрешенная шириной ввода, то сброс значения в каждой клавише нарушает функциональность браузера, которая автоматически прокручивает текст в позицию каретки в конец текста. Вместо этого текст прокручивается назад к началу, оставляя каретку вне поля зрения.
Здесь есть одна оговорка. В Firefox, если вы сбрасываете вводимый текст в каждой клавише, если текст длиннее, чем видимая область, разрешенная шириной ввода, то сброс значения в каждой клавише нарушает функциональность браузера, которая автоматически прокручивает текст в позицию каретки в конец текста. Вместо этого текст прокручивается назад к началу, оставляя каретку вне поля зрения.
function scroll(elementToBeScrolled)
{
//this will reset the scroll to the bottom of the viewable area.
elementToBeScrolled.topscroll = elementToBeScrolled.scrollheight;
}