Поймать вставить вход


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

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

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

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

17 187

17 ответов:

ок, просто наткнулся на ту же проблему.. Я пошел по длинному пути

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

Это уже ближе к тому, что вы могли хотеть.

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), вы в настоящее время получаете полное значение элемента + значение буфера обмена.

вы, вероятно, можете сделать некоторые дополнительные шаги, чтобы различать два значения, перед входом и после входа, если вы действительно только после того, какие данные были действительно вставлены в элемент.

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

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);
    });
});
 $('').bind('input propertychange', function() {....});                      

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

этот код работает для меня, либо вставить из правой кнопкой мыши или прямой копипаст

   $('.textbox').on('paste input propertychange', function (e) {
        $(this).val( $(this).val().replace(/[^0-9.]/g, '') );
    })

когда я вставить Section 1: Labour Cost становится 1 в текстовое поле.

чтобы разрешить только значение float я использую этот код

 //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();
      }
    });
$("#textboxid").on('input propertychange', function () {
    //perform operation
        });

Он будет работать нормально.

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

этот метод использует содержимое jqueries ().разворачивать.)(

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

это оказалось довольно иллюзорным. Значение ввода не обновляется до выполнения кода внутри функции события вставки. Я попытался вызвать другие события из функции paste event, но входное значение по-прежнему не обновляется вставленным текстом внутри функции любых событий. Это все события только вверх. Если вы вызываете keyup из функции события вставки, вы можете очистить вставленный текст из функции события keyup. как так...

$(':input').live
(
    'input paste',
    function(e)
    {
        $(this).keyup();
    }
);

$(':input').live
(
    'keyup',
    function(e)
    {
        // sanitize pasted text here
    }
);

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

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

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