Поймать ввод пасты

Я ищу способ очистки ввода, который я вставляю в браузер, это возможно сделать с помощью jQuery?

Мне удалось придумать это до сих пор:

$(this).live(pasteEventName, function(e) {
 // this is where i would like to sanitize my input
 return false;
}

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

ОК, просто столкнулся с той же проблемой .. Я прошел долгий путь

$('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
})

Я вроде исправил это с помощью следующего кода:

$("#editor").live('input paste',function(e){
    if(e.target.id == 'editor') {
        $('<textarea></textarea>').attr('id', 'paste').appendTo('#editMode');
        $("#paste").focus();
        setTimeout($(this).paste, 250);
    }
});

Теперь мне просто нужно сохранить местоположение каретки и добавить к этой позиции, тогда я все готово ... Я думаю :)

Хм ... Я думаю, что вы можете использовать, 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() {....});                      

Это будет работать для события вставки мыши.

Как насчет сравнения исходного значения поля и измененного значения поля и вычета разности как вставленного значения? Это правильно фиксирует вставленный текст, даже если в поле уже есть текст.

http://jsfiddle.net/6b7sK/

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);
    });
});

Этот код работает для меня, либо вставка с правого клика, либо прямая копия вставки

   $('.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();
      }
    });

document.addEventListener('paste', function(e){
    if(e.clipboardData.types.indexOf('text/html') > -1){
        processDataFromClipboard(e.clipboardData.getData('text/html'));
        e.preventDefault();

        ...
    }
});

Дальше:

• API буфера обмена и события

Смотрите этот пример: 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
})

Этот метод использует jqueries contents (). Unwrap ().

1. Во-первых, обнаружить событие вставки
2. Добавьте уникальный класс к тегам, которые уже находятся в элементе, в который мы вставляем.

3. По истечении заданного времени ожидания просмотрите все теги разворачивания содержимого, которые не имеют класс, который вы установили ранее. Примечание. Этот метод не удаляет самозакрывающиеся теги, например,
   см. Пример ниже.

   //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, если вы сбрасываете вводимый текст для каждой клавиатуры, если текст длиннее, чем видимая область, разрешенная шириной ввода, то сброс значения для каждой клавиши нарушает функциональность браузера, которая автоматически прокручивает текст в позицию каретки в конец текста. Вместо этого текст прокручивается назад к началу, оставляя каретку вне поля зрения.

Скрипт для удаления специальных символов из всех полей с классом 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");
    }
}

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

function scroll(elementToBeScrolled) 
{
     //this will reset the scroll to the bottom of the viewable area. 
     elementToBeScrolled.topscroll = elementToBeScrolled.scrollheight;
}