jQuery прив’язується до події вставки, як отримати вміст пасти

У мене є плагін jquery token tagit, і я хочу прив’язати до події вставки, щоб правильно додавати елементи.

Я можу прив’язати подію вставлення так:

    .bind("paste", paste_input)

...

function paste_input(e) {
    console.log(e)
    return false;
}

Як я можу отримати фактичне вставлене значення вмісту?

Існує подія, яка працює в сучасних браузерах. Ви можете отримати доступ до вставлених даних за допомогою getDataфункції на clipboardDataоб’єкті.

$("#textareaid").bind("paste", function(e){
    // access the clipboard using the api
    var pastedData = e.originalEvent.clipboardData.getData('text');
    alert(pastedData);
} );

Зверніть увагу, що прив’язка та відв’язування застаріли станом на jQuery 3. Переважним викликом є on .

Усі сучасні браузери підтримують API буфера обміну .

Дивіться також: У Jquery Як обробляти пасту?

Як щодо цього: http://jsfiddle.net/5bNx4/

Будь ласка, використовуйте .on якщо ви використовуєте jq1.7 та ін.

Поведінка: Коли ви вводите що-небудь або paste небудь на 1-му текстовому майданчику, внизу teaxtarea захоплює канавку.

Відпочинок Сподіваюся, це допоможе справі. :)

Корисне посилання =>

Як ви обробляєте 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

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

Це працює у всьому браузері, щоб отримати вставлене значення. А також до створення загального методу для всього текстового поля.

$("#textareaid").bind("paste", function(e){       
    var pastedData = e.target.value;
    alert(pastedData);
} )

Ви можете порівняти початкове значення поля та змінене значення поля та вирахувати різницю як вставлене значення. Це правильно ловить вставлений текст, навіть якщо в полі є наявний текст.

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

Здавалося б, до цієї події 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's $(element).text()
        // function result.
    });
});

Ви захочете виконати ітерацію по елементах, зберігаючи результат об’єднання рядків.

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

У сучасних браузерах це просто: просто використовуйте подію input разом з атрибутом inputType :

$(document).on('input', 'input, textarea', function(e){
  if (e.originalEvent.inputType == 'insertFromPaste') {
    alert($(this).val());
  }
});

https://codepen.io/anon/pen/jJOWxg