Решение #1 (только обычный текст и требуется Firefox 22+)

работает для IE6+, FF 22+, Chrome, Safari, Edge (Только протестировано в IE9+, но должно работать для более низких версий)

Если вам нужна поддержка для вставки HTML или Firefox

HTML-код

<div id='editableDiv' contenteditable='true'>Paste</div>

JavaScript

function handlePaste (e) {
    var clipboardData, pastedData;

    // Stop data actually being pasted into div
    e.stopPropagation();
    e.preventDefault();

    // Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text');

    // Do whatever with pasteddata
    alert(pastedData);
}

document.getElementById('editableDiv').addEventListener('paste', handlePaste);

JSFiddle:https://jsfiddle.net/swL8ftLs/12/

отметим, что это решение использует параметр "Текст" для getData функция, которая нештатна. Тем не менее, он работает во всех браузерах на момент написания.

решение #2 (HTML и работает для Firefox

протестировано в IE6+, ff 3.5+, Chrome, Safari, Edge

HTML-код

<div id='div' contenteditable='true'>Paste</div>

JavaScript

var editableDiv = document.getElementById('editableDiv');

function handlepaste (e) {
    var types, pastedData, savedContent;

    // Browsers that support the 'text/html' type in the Clipboard API (Chrome, Firefox 22+)
    if (e && e.clipboardData && e.clipboardData.types && e.clipboardData.getData) {

        // Check for 'text/html' in types list. See abligh's answer below for deatils on
        // why the DOMStringList bit is needed. We cannot fall back to 'text/plain' as
        // Safari/Edge don't advertise HTML data even if it is available
        types = e.clipboardData.types;
        if (((types instanceof DOMStringList) && types.contains("text/html")) || (types.indexOf && types.indexOf('text/html') !== -1)) {

            // Extract data and pass it to callback
            pastedData = e.clipboardData.getData('text/html');
            processPaste(editableDiv, pastedData);

            // Stop the data from actually being pasted
            e.stopPropagation();
            e.preventDefault();
            return false;
        }
    }

    // Everything else: Move existing element contents to a DocumentFragment for safekeeping
    savedContent = document.createDocumentFragment();
    while(editableDiv.childNodes.length > 0) {
        savedContent.appendChild(editableDiv.childNodes[0]);
    }

    // Then wait for browser to paste content into it and cleanup
    waitForPastedData(editableDiv, savedContent);
    return true;
}

function waitForPastedData (elem, savedContent) {

    // If data has been processes by browser, process it
    if (elem.childNodes && elem.childNodes.length > 0) {

        // Retrieve pasted content via innerHTML
        // (Alternatively loop through elem.childNodes or elem.getElementsByTagName here)
        var pastedData = elem.innerHTML;

        // Restore saved content
        elem.innerHTML = "";
        elem.appendChild(savedContent);

        // Call callback
        processPaste(elem, pastedData);
    }

    // Else wait 20ms and try again
    else {
        setTimeout(function () {
            waitForPastedData(elem, savedContent)
        }, 20);
    }
}

function processPaste (elem, pastedData) {
    // Do whatever with gathered data;
    alert(pastedData);
    elem.focus();
}

// Modern browsers. Note: 3rd argument is required for Firefox <= 6
if (editableDiv.addEventListener) {
    editableDiv.addEventListener('paste', handlepaste, false);
}
// IE <= 8
else {
    editableDiv.attachEvent('onpaste', handlepaste);
}

JSFiddle: https://jsfiddle.net/nicoburns/wrqmuabo/23/

объяснение

на onpaste событие div имеет handlePaste функция прикреплена к нему и передала один аргумент:см. раздел "ресурсы" ниже.

на :

эта функция имеет два ветви.

первые проверки на наличие event.clipboardData и проверяет, является ли это types свойство содержит 'text / html' (types может быть DOMStringList, которая проверяется с помощью contains метод или строка, которая проверяется с помощью indexOf метод). Если все эти условия выполнены, то мы действуем как в решении № 1, за исключением "text/html "вместо" text/plain". В настоящее время это работает в Chrome и Firefox 22+.

если этот метод не поддерживается (все остальные браузеры), то мы

1. сохранить содержимое элемента в DocumentFragment
2. пустой элемент
3. вызов waitForPastedData функции

на waitforpastedata функция:

эта функция сначала опрашивает вставленные данные (один раз в 20 мс), что необходимо, потому что она не появляется сразу. Когда появились данные это:

1. сохраняет innerHTML редактируемого div (который теперь является вставленными данными) в переменную
2. восстанавливает содержимое, сохраненное в DocumentFragment
3. вызывает функцию 'processPaste' с полученными данными

на :

делает произвольные вещи с вставленными данными. В этом случае мы просто оповещаем данные, вы можете делать все, что захотите. Вероятно, вы захотите запустить вставленные данные через какие-то данные процесс дезинфекции.

сохранение и восстановление позиции курсора

в реальной ситуации вы, вероятно, захотите сохранить выбор до и восстановить его после (установить положение курсора на contentEditable ). Затем вы можете вставить вставленные данные в положение курсора, в котором пользователь инициировал действие вставки.

ресурсы:

• событие вставки MDN: https://developer.mozilla.org/en-US/docs/Web/Events/paste
• буфер обмена MSDN:https://msdn.microsoft.com/en-us/library/ms535220 (v=против 85).aspx
• MDN DocumentFragment:https://developer.mozilla.org/en/docs/Web/API/DocumentFragment
• MDN DomStringList:https://developer.mozilla.org/en/docs/Web/API/DOMStringList

спасибо Тиму до предлагать использование DocumentFragment и abligh для улавливания ошибки в Firefox из-за использования DOMStringList вместо строки для clipboardData.типы

простой вариант:

document.querySelector('[contenteditable]').addEventListener('paste', (e) => {
    e.preventDefault();
    const text = (e.originalEvent || e).clipboardData.getData('text/plain');
    window.document.execCommand('insertText', false, text);
});

используя clipboardData

демо : http://jsbin.com/nozifexasu/edit?js, выход

Edge, Firefox, Chrome, Safari, Opera протестированы.

Примечание: не забудьте проверить вход/выход на на стороне сервера также (например,PHP strip-tags)

Live Demo

протестировано на Chrome / FF / IE11

есть раздражение Chrome / IE, которое заключается в том, что эти браузеры добавляют <div> элемент для каждой новой строки. Есть сообщение об этом здесь и это можно исправить, установив contenteditable элемент display:inline-block

выберите выделенный HTML и вставьте его сюда:

function onPaste(e){
  var content;
  e.preventDefault();

  if( e.clipboardData ){
    content = e.clipboardData.getData('text/plain');
    document.execCommand('insertText', false, content);
    return false;
  }
  else if( window.clipboardData ){
    content = window.clipboardData.getData('Text');
    if (window.getSelection)
      window.getSelection().getRangeAt(0).insertNode( document.createTextNode(content) );
  }
}


/////// EVENT BINDING /////////
document.querySelector('[contenteditable]').addEventListener('paste', onPaste);

[contenteditable]{ 
  /* chroem bug: https://stackoverflow.com/a/24689420/104380 */
  display:inline-block;
  width: calc(100% - 40px);
  min-height:120px; 
  margin:10px;
  padding:10px;
  border:1px dashed green;
}

/* 
 mark HTML inside the "contenteditable"  
 (Shouldn't be any OFC!)'
*/
[contenteditable] *{
  background-color:red;
}

<div contenteditable></div>

Я написал небольшое доказательство концепции предложения Тима Даунса здесь с помощью текстового поля за пределами экрана. И вот код:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script language="JavaScript">
 $(document).ready(function()
{

var ctrlDown = false;
var ctrlKey = 17, vKey = 86, cKey = 67;

$(document).keydown(function(e)
{
    if (e.keyCode == ctrlKey) ctrlDown = true;
}).keyup(function(e)
{
    if (e.keyCode == ctrlKey) ctrlDown = false;
});

$(".capture-paste").keydown(function(e)
{
    if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)){
        $("#area").css("display","block");
        $("#area").focus();         
    }
});

$(".capture-paste").keyup(function(e)
{
    if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)){                      
        $("#area").blur();
        //do your sanitation check or whatever stuff here
        $("#paste-output").text($("#area").val());
        $("#area").val("");
        $("#area").css("display","none");
    }
});

});
</script>

</head>
<body class="capture-paste">

<div id="paste-output"></div>


    <div>
    <textarea id="area" style="display: none; position: absolute; left: -99em;"></textarea>
    </div>

</body>
</html>

просто скопируйте и вставьте весь код в один html-файл и попробуйте вставить (используя ctrl-v) текст из буфера обмена в любом месте документа.

я протестировал его в IE9 и новых версиях Firefox, Chrome и Opera. Работать достаточно хорошо. Также хорошо, что можно использовать любую комбинацию клавиш, которую он предпочитает для триггера этой функциональности. Конечно не забудьте включить источники jQuery.

Не стесняйтесь использовать этот код, и если вы пришли с некоторыми улучшениями или проблемами, пожалуйста, отправьте их обратно. Также обратите внимание, что я не разработчик JavaScript, так что я, возможно, пропустил что-то (=>сделать свой собственный testign).

на основе l2aelba anwser. Это было протестировано на FF, Safari, Chrome, IE (8,9,10 и 11)

    $("#editText").on("paste", function (e) {
        e.preventDefault();

        var text;
        var clp = (e.originalEvent || e).clipboardData;
        if (clp === undefined || clp === null) {
            text = window.clipboardData.getData("text") || "";
            if (text !== "") {
                if (window.getSelection) {
                    var newNode = document.createElement("span");
                    newNode.innerHTML = text;
                    window.getSelection().getRangeAt(0).insertNode(newNode);
                } else {
                    document.selection.createRange().pasteHTML(text);
                }
            }
        } else {
            text = clp.getData('text/plain') || "";
            if (text !== "") {
                document.execCommand('insertText', false, text);
            }
        }
    });

этот не использует setTimeout ().

я использовал этой отличная статья для достижения поддержки кросс-браузера.

$(document).on("focus", "input[type=text],textarea", function (e) {
    var t = e.target;
    if (!$(t).data("EventListenerSet")) {
        //get length of field before paste
        var keyup = function () {
            $(this).data("lastLength", $(this).val().length);
        };
        $(t).data("lastLength", $(t).val().length);
        //catch paste event
        var paste = function () {
            $(this).data("paste", 1);//Opera 11.11+
        };
        //process modified data, if paste occured
        var func = function () {
            if ($(this).data("paste")) {
                alert(this.value.substr($(this).data("lastLength")));
                $(this).data("paste", 0);
                this.value = this.value.substr(0, $(this).data("lastLength"));
                $(t).data("lastLength", $(t).val().length);
            }
        };
        if (window.addEventListener) {
            t.addEventListener('keyup', keyup, false);
            t.addEventListener('paste', paste, false);
            t.addEventListener('input', func, false);
        }
        else {//IE
            t.attachEvent('onkeyup', function () {
                keyup.call(t);
            });
            t.attachEvent('onpaste', function () {
                paste.call(t);
            });
            t.attachEvent('onpropertychange', function () {
                func.call(t);
            });
        }
        $(t).data("EventListenerSet", 1);
    }
}); 

этот код расширяется с помощью дескриптора выбора перед вставкой: демо

на очистка вставленного текста и замена выделенного текста вставленным текстом дело довольно тривиальное:

<div id='div' contenteditable='true' onpaste='handlepaste(this, event)'>Paste</div>

JS:

function handlepaste(el, e) {
  document.execCommand('insertText', false, e.clipboardData.getData('text/plain'));
  e.preventDefault();
}

Это должно работать во всех браузерах, поддерживающих событие onpaste и наблюдателя мутации.

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

он работает с помощью contenteditable, onpaste event (поддерживается всеми основными браузерами) En Mutation observers (поддерживается Chrome, Firefox и IE11+)

Шаг 1

создать HTML-элемент с contenteditable

<div contenteditable="true" id="target_paste_element"></div>

Шаг 2

в код Javascript добавьте следующее событие

document.getElementById("target_paste_element").addEventListener("paste", pasteEventVerifierEditor.bind(window, pasteCallBack), false);

нам нужно привязать pasteCallBack, так как наблюдатель мутаций будет вызываться асинхронно.

Шаг 3

добавьте следующую функцию в ваш код

function pasteEventVerifierEditor(callback, e)
{
   //is fired on a paste event. 
    //pastes content into another contenteditable div, mutation observer observes this, content get pasted, dom tree is copied and can be referenced through call back.
    //create temp div
    //save the caret position.
    savedCaret = saveSelection(document.getElementById("target_paste_element"));

    var tempDiv = document.createElement("div");
    tempDiv.id = "id_tempDiv_paste_editor";
    //tempDiv.style.display = "none";
    document.body.appendChild(tempDiv);
    tempDiv.contentEditable = "true";

    tempDiv.focus();

    //we have to wait for the change to occur.
    //attach a mutation observer
    if (window['MutationObserver'])
    {
        //this is new functionality
        //observer is present in firefox/chrome and IE11
        // select the target node
        // create an observer instance
        tempDiv.observer = new MutationObserver(pasteMutationObserver.bind(window, callback));
        // configuration of the observer:
        var config = { attributes: false, childList: true, characterData: true, subtree: true };

        // pass in the target node, as well as the observer options
        tempDiv.observer.observe(tempDiv, config);

    }   

}



function pasteMutationObserver(callback)
{

    document.getElementById("id_tempDiv_paste_editor").observer.disconnect();
    delete document.getElementById("id_tempDiv_paste_editor").observer;

    if (callback)
    {
        //return the copied dom tree to the supplied callback.
        //copy to avoid closures.
        callback.apply(document.getElementById("id_tempDiv_paste_editor").cloneNode(true));
    }
    document.body.removeChild(document.getElementById("id_tempDiv_paste_editor"));

}

function pasteCallBack()
{
    //paste the content into the element.
    restoreSelection(document.getElementById("target_paste_element"), savedCaret);
    delete savedCaret;

    pasteHtmlAtCaret(this.innerHTML, false, true);
}   


saveSelection = function(containerEl) {
if (containerEl == document.activeElement)
{
    var range = window.getSelection().getRangeAt(0);
    var preSelectionRange = range.cloneRange();
    preSelectionRange.selectNodeContents(containerEl);
    preSelectionRange.setEnd(range.startContainer, range.startOffset);
    var start = preSelectionRange.toString().length;

    return {
        start: start,
        end: start + range.toString().length
    };
}
};

restoreSelection = function(containerEl, savedSel) {
    containerEl.focus();
    var charIndex = 0, range = document.createRange();
    range.setStart(containerEl, 0);
    range.collapse(true);
    var nodeStack = [containerEl], node, foundStart = false, stop = false;

    while (!stop && (node = nodeStack.pop())) {
        if (node.nodeType == 3) {
            var nextCharIndex = charIndex + node.length;
            if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
                range.setStart(node, savedSel.start - charIndex);
                foundStart = true;
            }
            if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
                range.setEnd(node, savedSel.end - charIndex);
                stop = true;
            }
            charIndex = nextCharIndex;
        } else {
            var i = node.childNodes.length;
            while (i--) {
                nodeStack.push(node.childNodes[i]);
            }
        }
    }

    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}

function pasteHtmlAtCaret(html, returnInNode, selectPastedContent) {
//function written by Tim Down

var sel, range;
if (window.getSelection) {
    // IE9 and non-IE
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
        range.deleteContents();

        // Range.createContextualFragment() would be useful here but is
        // only relatively recently standardized and is not supported in
        // some browsers (IE9, for one)
        var el = document.createElement("div");
        el.innerHTML = html;
        var frag = document.createDocumentFragment(), node, lastNode;
        while ( (node = el.firstChild) ) {
            lastNode = frag.appendChild(node);
        }
        var firstNode = frag.firstChild;
        range.insertNode(frag);

        // Preserve the selection
        if (lastNode) {
            range = range.cloneRange();
            if (returnInNode)
            {
                range.setStart(lastNode, 0); //this part is edited, set caret inside pasted node.
            }
            else
            {
                range.setStartAfter(lastNode); 
            }
            if (selectPastedContent) {
                range.setStartBefore(firstNode);
            } else {
                range.collapse(true);
            }
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
} else if ( (sel = document.selection) && sel.type != "Control") {
    // IE < 9
    var originalRange = sel.createRange();
    originalRange.collapse(true);
    sel.createRange().pasteHTML(html);
    if (selectPastedContent) {
        range = sel.createRange();
        range.setEndPoint("StartToStart", originalRange);
        range.select();
    }
}

}

что делает этот код:

1. кто-то запускает событие вставить используя ctrl-v, contextmenu или другие средства
2. в случае вставки создается новый элемент с contenteditable (элемент с contenteditable имеет повышенные привилегии)
3. положение курсора целевого элемента сохраняется.
4. фокус установлен на новый элемент
5. содержимое вставляется в новый элемент и отображается в DOM.
6. наблюдатель мутации улавливает это (он регистрирует все изменения в дереве dom и содержание.) Затем запускает событие мутации.
7. dom вставленного содержимого клонируется в переменную и возвращается в обратный вызов. Временный элемент уничтожается.
8. обратный вызов получает клонированный DOM. Каретка восстановлена. Вы можете отредактировать его перед добавлением к цели. элемент. В этом примере я использую функции Tim Downs для сохранения/восстановления курсора и вставки HTML в элемент.

большое спасибо Тим Вниз!--53--> См. этот пост для ответа:

получить вставленный контент в документе на событие вставки

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

onPaste: function() {
    var oThis = this;
    setTimeout(function() { // Defer until onPaste() is done
        console.log('paste', oThis.input.value);
        // Manipulate pasted input
    }, 1);
}

это было слишком долго для комментария к ответу Нико, который, я думаю, больше не работает в Firefox (в комментариях) и не работал для меня на Safari как есть.

во-первых, теперь вы можете читать непосредственно из буфера обмена. Вместо кода типа:

if (/text\/plain/.test(e.clipboardData.types)) {
    // shouldn't this be writing to elem.value for text/plain anyway?
    elem.innerHTML = e.clipboardData.getData('text/plain');
}

использование:

types = e.clipboardData.types;
if (((types instanceof DOMStringList) && types.contains("text/plain")) ||
    (/text\/plain/.test(types))) {
    // shouldn't this be writing to elem.value for text/plain anyway?
    elem.innerHTML = e.clipboardData.getData('text/plain');
}

потому что Firefox имеет types поле, которое является DOMStringList, который не реализует test.

следующий Firefox не позволит вставить если фокус находится в

Первое, что приходит на ум, это пастехандлер закрытия lib google http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/pastehandler.html

это сработало для меня:

function onPasteMe(currentData, maxLen) {
    // validate max length of pasted text
    var totalCharacterCount = window.clipboardData.getData('Text').length;
}

<input type="text" onPaste="return onPasteMe(this, 50);" />

Это решение заменяет тег html, это просто и кросс-браузер; проверьте этот jsfiddle:http://jsfiddle.net/tomwan/cbp1u2cx/1/, основной код:

var $plainText = $("#plainText");
var $linkOnly = $("#linkOnly");
var $html = $("#html");

$plainText.on('paste', function (e) {
    window.setTimeout(function () {
        $plainText.html(removeAllTags(replaceStyleAttr($plainText.html())));
    }, 0);
});

$linkOnly.on('paste', function (e) {
    window.setTimeout(function () {
        $linkOnly.html(removeTagsExcludeA(replaceStyleAttr($linkOnly.html())));
    }, 0);
});

function replaceStyleAttr (str) {
    return str.replace(/(<[\w\W]*?)(style)([\w\W]*?>)/g, function (a, b, c, d) {
        return b + 'style_replace' + d;
    });
}

function removeTagsExcludeA (str) {
    return str.replace(/<\/?((?!a)(\w+))\s*[\w\W]*?>/g, '');
}

function removeAllTags (str) {
    return str.replace(/<\/?(\w+)\s*[\w\W]*?>/g, '');
}

Примечание: Вы должны сделать некоторую работу о фильтре xss на задней стороне, потому что это решение не может фильтровать строки, такие как '>'

Вы можете сделать это таким образом:

используйте этот плагин jQuery для событий pre & post paste:

$.fn.pasteEvents = function( delay ) {
    if (delay == undefined) delay = 20;
    return $(this).each(function() {
        var $el = $(this);
        $el.on("paste", function() {
            $el.trigger("prepaste");
            setTimeout(function() { $el.trigger("postpaste"); }, delay);
        });
    });
};

теперь вы можете использовать этот плагин;:

$('#txt').on("prepaste", function() { 

    $(this).find("*").each(function(){

        var tmp=new Date.getTime();
        $(this).data("uid",tmp);
    });


}).pasteEvents();

$('#txt').on("postpaste", function() { 


  $(this).find("*").each(function(){

     if(!$(this).data("uid")){
        $(this).removeClass();
          $(this).removeAttr("style id");
      }
    });
}).pasteEvents();

объяснение

Сначала установите uid для всех существующих элементов в качестве атрибута данных.

затем сравните все узлы после события вставки. Таким образом, сравнивая, вы можете идентифицировать недавно вставленный, потому что у них будет uid, а затем просто удалите атрибут style / class / id из нового созданные элементы, так что вы можете сохранить старое форматирование.

$('#dom').on('paste',function (e){
    setTimeout(function(){
        console.log(e.currentTarget.value);
    },0);
});

просто дайте браузеру вставить, как обычно, в его редактируемый div, а затем после вставки замените любые элементы span, используемые для пользовательских стилей текста, самим текстом. Кажется, это работает нормально в internet explorer и других браузерах, которые я пробовал...

$('[contenteditable]').on('paste', function (e) {
    setTimeout(function () {
        $(e.target).children('span').each(function () {
            $(this).replaceWith($(this).text());
        });
    }, 0);
});

Это решение предполагает, что вы используете jQuery и вы не хотите форматирование текста в любом из вашего контента редактируемые divs.

плюс в том, что это супер простой.

function myFunct( e ){
    e.preventDefault();

    var pastedText = undefined;
    if( window.clipboardData && window.clipboardData.getData ){
    pastedText = window.clipboardData.getData('Text');
} 
else if( e.clipboardData && e.clipboardData.getData ){
    pastedText = e.clipboardData.getData('text/plain');
}

//work with text

}
document.onpaste = myFunct;

простое решение:

document.onpaste = function(e) {
    var pasted = e.clipboardData.getData('Text');
    console.log(pasted)
}

это существующий код, опубликованный выше, но я обновил его для IE, ошибка была, когда существующий текст выбран и вставлен, не удалит выбранный контент. Это было исправлено приведенным ниже кодом

selRange.deleteContents(); 

см. полный код ниже

$('[contenteditable]').on('paste', function (e) {
    e.preventDefault();

    if (window.clipboardData) {
        content = window.clipboardData.getData('Text');        
        if (window.getSelection) {
            var selObj = window.getSelection();
            var selRange = selObj.getRangeAt(0);
            selRange.deleteContents();                
            selRange.insertNode(document.createTextNode(content));
        }
    } else if (e.originalEvent.clipboardData) {
        content = (e.originalEvent || e).clipboardData.getData('text/plain');
        document.execCommand('insertText', false, content);
    }        
});