Ловіть введення пасти

Я шукаю спосіб переосмислити дані, які я вставляю у браузер, чи можливо це зробити з 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 () може заповнитися.

E.

Ви можете фактично схопити значення прямо з події . Це трохи тупо, як дістатися до нього.

Поверніть помилкове значення, якщо ви не хочете, щоб воно пройшло.

$(this).on('paste', function(e) {

  var pasteData = e.originalEvent.clipboardData.getData('text')

});

Для сумісності між платформами він повинен обробляти події входу та зміни власності:

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

Прослухайте подію вставки та встановіть слухача подій клавіатури. Під час клавіатури введіть значення та видаліть слухач подій клавіатури.

$('.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), ви отримуєте повне значення елемента + значення clipboard'ed.

Ви, ймовірно, можете зробити кілька додаткових кроків для розрізнення двох значень перед введенням і після введення, якщо ви дійсно є лише після того, як дані були справді вставлені в елемент.

 $('').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 відбувається подія на шляху пасти. Так:

$ (something).bind ("input paste", function (e) {
    // check for paste as in example above and
    // do something
})

Цей метод використовує вміст jqueries (). Unrap ().

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

Це виявилося досить ілюзивно. Значення вводу не оновлюється до виконання коду всередині функції події вставки. Я намагався викликати інші події з функції події вставки, але вхідне значення все ще не оновлюється вставленим текстом всередині функції будь-яких подій. Це все події, крім клавіатури. Якщо ви зателефонуєте за допомогою клавіатури в межах функції події вставки, ви можете очистити вкладений текст із функції події клавіатури. так ...

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