해결 방법 # 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 이상에서 작동합니다.
이 방법이 지원되지 않는 경우 (다른 모든 브라우저)
- 요소의 내용을
DocumentFragment
- 요소 비우기
waitForPastedData함수를 호출
waitforpastedata기능 :
이 기능은 먼저 붙여 넣은 데이터 (20ms 당 한 번)를 폴링합니다.이 데이터는 바로 나타나지 않기 때문에 필요합니다. 데이터가 나타 났을 때 :
- 편집 가능한 div (현재 붙여 넣은 데이터)의 innerHTML을 변수에 저장합니다.
- DocumentFragment에 저장된 내용을 복원
- 검색된 데이터와 함께 'processPaste'함수를 호출합니다.
processpaste기능 :
붙여 넣은 데이터로 임의의 작업을 수행합니다. 이 경우 우리는 데이터를 경고하기 만하면 원하는대로 할 수 있습니다. 붙여 넣은 데이터를 일종의 데이터 삭제 프로세스를 통해 실행하고 싶을 것입니다.
커서 위치 저장 및 복원
실제 상황에서는 선택 사항을 이전에 저장 한 후 나중에 복원 할 수 있습니다 ( contentEditable <div>에서 커서 위치 설정 ). 그런 다음 붙여 넣기 작업을 시작할 때 커서가 있던 위치에 붙여 넣은 데이터를 삽입 할 수 있습니다.
자원:
DocumentFragment 사용을 제안한 Tim Down에게 감사하고 clipboardData.types의 문자열 대신 DOMStringList를 사용하여 Firefox에서 오류를 발견 한 경우