해결 방법 # 1 (일반 텍스트 만 해당하며 Firefox 22 이상이 필요함)

IE6 +, FF 22+, Chrome, Safari, Edge에서 작동합니다 (IE9 +에서만 테스트되었지만 하위 버전에서는 작동 함)

HTML 또는 Firefox <= 22 붙여 넣기를 지원해야하는 경우 솔루션 # 2를 참조하십시오.

HTML

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

자바 스크립트

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은 비표준 인 함수에 ‘Text’매개 변수를 사용합니다 . 그러나 글을 쓰는 시점에 모든 브라우저에서 작동합니다.

솔루션 # 2 (HTML 및 Firefox <= 22에서 작동)

IE6 +, FF 3.5+, Chrome, Safari, Edge에서 테스트

HTML

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

자바 스크립트

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이 이벤트 의 속성 은 특히 비 브라우저에서 클립 보드 액세스를 가능하게하는 것입니다. IE에서는 window.clipboardDataAPI가 약간 다르지만 이에 해당합니다.

아래의 리소스 섹션을 참조하십시오.

handlepaste기능 :

이 기능에는 두 개의 분기가 있습니다.

제의 존재에 대한 검사 event.clipboardData그것의 여부를 체크 types재산권 ‘텍스트 / HTML’을 포함는 ( types있을 수 중 하나 DOMStringList은 USING 확인하는 contains방법, 또는 사용 점검 문자열 indexOf법). 이러한 조건이 모두 충족되면 ‘text / plain’대신 ‘text / html’을 제외하고 솔루션 # 1에서와 같이 진행합니다. 현재 Chrome 및 Firefox 22 이상에서 작동합니다.

이 방법이 지원되지 않는 경우 (다른 모든 브라우저)

1. 요소의 내용을 DocumentFragment
2. 요소 비우기
3. waitForPastedData함수를 호출

waitforpastedata기능 :

이 기능은 먼저 붙여 넣은 데이터 (20ms 당 한 번)를 폴링합니다.이 데이터는 바로 나타나지 않기 때문에 필요합니다. 데이터가 나타 났을 때 :

1. 편집 가능한 div (현재 붙여 넣은 데이터)의 innerHTML을 변수에 저장합니다.
2. DocumentFragment에 저장된 내용을 복원
3. 검색된 데이터와 함께 ‘processPaste’함수를 호출합니다.

processpaste기능 :

붙여 넣은 데이터로 임의의 작업을 수행합니다. 이 경우 우리는 데이터를 경고하기 만하면 원하는대로 할 수 있습니다. 붙여 넣은 데이터를 일종의 데이터 삭제 프로세스를 통해 실행하고 싶을 것입니다.

커서 위치 저장 및 복원

실제 상황에서는 선택 사항을 이전에 저장 한 후 나중에 복원 할 수 있습니다 ( contentEditable <div>에서 커서 위치 설정 ). 그런 다음 붙여 넣기 작업을 시작할 때 커서가 있던 위치에 붙여 넣은 데이터를 삽입 할 수 있습니다.

자원:

• MDN 붙여 넣기 이벤트 : https://developer.mozilla.org/en-US/docs/Web/Events/paste
• MSDN 클립 보드 : https://msdn.microsoft.com/en-us/library/ms535220(v=vs.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 사용을 제안한 Tim Down에게 감사하고 clipboardData.types의 문자열 대신 DOMStringList를 사용하여 Firefox에서 오류를 발견 한 경우

답변

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

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>

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

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