HTML5 실제 전투 및 클립보드 이벤트 분석

복사하고 붙여넣을 때 많은 웹사이트에서 클립보드에 대한 관련 프롬프트를 표시합니다. 처음 프론트엔드 엔지니어로 일을 시작했을 때 저는 이것이 어떻게 이루어졌는지 궁금했습니다. 이제 브라우저는 이미 클립보드 관련 이벤트를 표준에 통합했기 때문에 더 이상 궁금해할 필요가 없습니다.

IE는 클립보드 관련 이벤트를 지원하고 JavaScript를 통해 클립보드 데이터에 액세스하는 최초의 브라우저입니다. IE의 구현은 사실상의 표준이 되었고 이후 Firefox 3+, Chrome 및 Safari 2+는 모두 유사한 이벤트와 클립보드 액세스를 지원했지만 Opera는 JavaScript를 통한 클립보드 액세스를 지원하지 않았습니다. HTML5가 등장하기 전까지 클립보드 관련 이벤트는 HTML5 사양에 포함되었습니다. 다음은 6개의 클립보드 이벤트입니다.

　beforecopy: 복사 작업이 발생하기 전에 트리거됩니다.

　copy: 복사 작업이 발생할 때 트리거됩니다.

　beforecut: 자르기 작업이 발생하기 전에 트리거됩니다.

　cut: 자르기 작업이 발생할 때 트리거됩니다.

　beforepaste: 이전에 트리거됩니다. 붙여넣기 작업이 발생합니다.

　붙여넣기: 붙여넣기 작업이 발생할 때 트리거됩니다.

클립보드 작업에 대한 표준이 없기 때문에 이러한 이벤트 및 관련 개체는 브라우저마다 다릅니다. Firefox, Chrome 및 Safari에서 beforecopy, beforecut 및 beforepaste 이벤트는 텍스트 상자의 컨텍스트 메뉴가 표시될 때만 실행됩니다(클립보드 이벤트 예상). 그러나 IE는 복사, 잘라내기, 붙여넣기 이벤트를 트리거하기 전에 이러한 이벤트를 트리거합니다. 복사, 잘라내기, 붙여넣기 이벤트의 경우 컨텍스트 메뉴(오른쪽 클릭 메뉴)에서 해당 옵션을 선택하거나 (ctrl+v)와 같은 해당 키보드 키 조합을 사용하는 한 모든 브라우저에서 해당 이벤트가 트리거됩니다.

실제 이벤트가 발생하기 전에 beforecopy, beforecut 및 beforepaste 이벤트를 사용하여 클립보드로 데이터를 전송하거나 클립보드에서 데이터를 가져오기 전에 데이터를 수정할 수 있습니다. 그러나 이러한 이벤트를 취소해도 클립보드의 작업은 취소되지 않습니다. 복사, 잘라내기, 붙여넣기 이벤트를 취소해야만 해당 작업이 발생하지 않도록 할 수 있습니다.

클립보드의 데이터에 액세스하려면 ClipboardData 객체를 사용할 수 있습니다. IE에서 ClipboardData 객체는 Chrome, Safari 및 Firefox 4+에서 window 객체의 속성이고, ClipboardData 객체는 속성입니다. 해당 이벤트 쌍의 . 그러나 Chrome, Safari 및 Firefox 4+에서는 클립보드 이벤트를 처리하는 동안에만 클립보드데이터 개체가 유효합니다. 이는 IE에서 클립보드에 대한 무단 액세스를 방지하기 위한 것이며 언제든지 클립보드데이터 개체에 액세스할 수 있습니다. 브라우저 간 호환성을 보장하려면 클립보드 이벤트 중에만 이 개체를 사용하는 것이 가장 좋습니다.

이 clipsboardData 객체에는 getData() 메서드, setData() 메서드 및clearData() 메서드의 세 가지 메서드가 있습니다. 그 중 getData() 메소드는 클립보드에서 데이터를 가져오는 데 사용되며, 가져오려는 데이터 형식을 매개변수로 받습니다. IE에는 'text'와 'URL'이라는 두 가지 데이터 형식이 있습니다. Chrome, Safari 및 Firefox 4+에서는 이 매개변수가 MIME 유형이지만 'text'는 'text/plain'을 나타내는 데 사용될 수 있습니다.

setData() 메소드의 첫 번째 매개변수도 데이터 유형이고, 두 번째 매개변수는 클립보드에 넣을 텍스트입니다. 첫 번째 매개변수에 대해 IE는 여전히 "text"와 "URL"을 지원합니다. . , Chrome 및 Safari에서는 MIME 유형이 계속 지원됩니다. 그러나 getData() 메서드와 달리 Chrome 및 Safari의 setData() 메서드는 일단 클립보드에 있으면 이를 성공적으로 인식할 수 없습니다. true를 반환하고 그렇지 않으면 false를 반환합니다. 그럼 다음의 간단한 예를 살펴보겠습니다.

JavaScript 코드. 여기서 getClipboardText() 메소드는 상대적으로 간단합니다. 단지 클립보드데이터 객체의 위치를 ​​결정한 다음 "text" 유형으로 getData() 메소드를 호출하면 됩니다. 더 복잡합니다. clipsboardData 객체를 얻은 후에는 다양한 브라우저 구현에 따라 setData() 메서드에 대해 다양한 유형을 전달해야 합니다(Chrome 및 Safari의 경우 "text/plain"이고 IE의 경우 "text"입니다). . 텍스트 상자에 붙여넣은 텍스트에 특정 문자가 포함되어 있는지 또는 특정 형식을 준수하는지 확인해야 하는 경우 클립보드에 액세스하는 것이 유용합니다. , 붙여넣은 값이 유효한지 확인해야 합니다. 붙여넣기 이벤트에서는 클립보드의 값이 유효한지 여부를 확인할 수 있으며, 다음 예와 같이 기본 동작을 취소할 수 있습니다. 🎜>HTML 코드

//获取剪贴板数据方法
function getClipboardText(event){	var clipboardData = event.clipboardData || window.clipboardData;	return clipboardData.getData("text");
};


//设置剪贴板数据
function setClipboardText(event, value){	if(event.clipboardData){		
return event.clipboardData.setData("text/plain", value);	
}else if(window.clipboardData){		
return window.clipboardData.setData("text", value);	}
};

JavaScript 코드

<input type="text" id="inp" value="梦龙小站" />

여기서 onpaste 이벤트 핸들러는 클립보드 값이 정규식과 일치하지 않는 경우 숫자 값만 텍스트 상자에 붙여넣도록 합니다. 붙여넣기 작업이 취소됩니다. Chrome, Firefox 및 Safari는 onpaste 이벤트 핸들러의 getData() 메소드에 대한 액세스만 허용합니다.

모든 브라우저가 클립보드에 대한 액세스를 지원하는 것은 아니므로 하나 이상의 클립보드 작업을 차단하는 것이 더 간단한 방법입니다. 복사, 잘라내기, 붙여넣기 이벤트를 지원하는 브라우저(Firefox 3+, Safari, Chrome 및 IE)에서는 이러한 이벤트의 기본 동작을 쉽게 방지할 수 있습니다. Opera에서는 이러한 이벤트를 트리거하는 키 입력을 방지해야 하며 텍스트 상자에 컨텍스트 메뉴(오른쪽 클릭 메뉴)가 표시되는 것도 방지해야 합니다.