Событие вставки улова JavaScript в текстовом поле

Несколько дней назад я ответил на аналогичный вопрос: Обнаружьте вставленный текст с помощью ctrl + v или щелкните правой кнопкой мыши - ›Вставить. На этот раз я включил довольно длинную функцию, которая точно определяет границы выделения в текстовой области IE; остальное относительно просто.

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

function getSelectionBoundary(el, start) {
    var property = start ? "selectionStart" : "selectionEnd";
    var originalValue, textInputRange, precedingRange, pos, bookmark, isAtEnd;

    if (typeof el[property] == "number") {
        return el[property];
    } else if (document.selection && document.selection.createRange) {
        el.focus();

        var range = document.selection.createRange();
        if (range) {
            // Collapse the selected range if the selection is not a caret
            if (document.selection.type == "Text") {
                range.collapse(!!start);
            }

            originalValue = el.value;
            textInputRange = el.createTextRange();
            precedingRange = el.createTextRange();
            pos = 0;

            bookmark = range.getBookmark();
            textInputRange.moveToBookmark(bookmark);

            if (/[\r\n]/.test(originalValue)) {
                // Trickier case where input value contains line breaks

                // Test whether the selection range is at the end of the
                // text input by moving it on by one character and
                // checking if it's still within the text input.
                try {
                    range.move("character", 1);
                    isAtEnd = (range.parentElement() != el);
                } catch (ex) {
                    log.warn("Error moving range", ex);
                    isAtEnd = true;
                }
                range.moveToBookmark(bookmark);

                if (isAtEnd) {
                    pos = originalValue.length;
                } else {
                    // Insert a character in the text input range and use
                    // that as a marker
                    textInputRange.text = " ";
                    precedingRange.setEndPoint("EndToStart", textInputRange);
                    pos = precedingRange.text.length - 1;

                    // Delete the inserted character
                    textInputRange.moveStart("character", -1);
                    textInputRange.text = "";
                }
            } else {
                // Easier case where input value contains no line breaks
                precedingRange.setEndPoint("EndToStart", textInputRange);
                pos = precedingRange.text.length;
            }
            return pos;
        }
    }
    return 0;
}

function getTextAreaSelection(textarea) {
    var start = getSelectionBoundary(textarea, true),
        end = getSelectionBoundary(textarea, false);

    return {
        start: start,
        end: end,
        length: end - start,
        text: textarea.value.slice(start, end)
    };
}

function detectPaste(textarea, callback) {
    textarea.onpaste = function() {
        var sel = getTextAreaSelection(textarea);
        var initialLength = textarea.value.length;
        window.setTimeout(function() {
            var val = textarea.value;
            var pastedTextLength = val.length - (initialLength - sel.length);
            var end = sel.start + pastedTextLength;
            callback({
                start: sel.start,
                end: end,
                length: pastedTextLength,
                text: val.slice(sel.start, end),
                replacedText: sel.text
            });
        }, 1);
    };
}

window.onload = function() {
    var textarea = document.getElementById("your_textarea");
    detectPaste(textarea, function(pasteInfo) {
        var val = textarea.value;

        // Delete the pasted text and restore any previously selected text
        textarea.value = val.slice(0, pasteInfo.start) +
            pasteInfo.replacedText + val.slice(pasteInfo.end);

        alert(pasteInfo.text);
    });
};

Теперь вы можете использовать FilteredPaste.js (http://willemmulder.github.com/FilteredPaste.js/) вместо этого. Это позволит вам контролировать, какой контент будет вставлен в текстовое поле или контент, и вы сможете фильтровать / изменять / извлекать контент по своему желанию.

Быстрый поиск показывает мне, что для разных браузеров существуют разные методы. Я не уверен, что у jQuery есть решение. У Prototype.js его, похоже, нет. Может быть, YUI сможет сделать это за вас?

Вы также можете использовать TinyMCE, поскольку у него есть множество различных триггеров событий. Это полноценный текстовый процессор, но вы можете использовать его как обычный текст, если хотите. Хотя это может быть слишком много для прибавления. Например, при запуске он превращает ваш <textarea> в iFrame с несколькими подпрограммами. Но он сделает то, о чем вы просите.

- Дэйв