HTML5 actual combat and analysis of clipboard events

Many websites will display relevant prompts about the clipboard when copying and pasting. When I first started working as a front-end engineer, I was still wondering how this was achieved. Now, we no longer have to wonder, because browsers have already incorporated clipboard-related events into standards.

IE is the first browser to support clipboard-related events and access clipboard data through JavaScript. IE's implementation became the de facto standard, and subsequently Firefox 3+, Chrome, and Safari 2+ all supported similar events and clipboard access, but Opera did not support access to the clipboard through JavaScript. Until the arrival of HTML5, clipboard-related events were incorporated into the HTML5 specification. Below are the 6 clipboard events.

　beforecopy：Triggered before the copy operation occurs;

　copy：Triggered when the copy operation occurs;

　beforecut：Triggered before the cutting operation occurs;

　cut：Triggered when the cutting operation occurs;

　beforepaste: Triggered before the paste operation occurs;

　paste: Triggered when the paste operation occurs.

Since there is no standard for clipboard operations, these events and related objects will vary from browser to browser. In Firefox, Chrome, and Safari, the beforecopy, beforecut, and beforepaste events will only fire when the context menu for the text box is displayed (expecting a clipboard event). But IE will trigger these events before triggering the copy, cut, and paste events. As for the copy, cut and paste events, all browsers will trigger them as long as the corresponding option is selected in the context menu (right-click menu), or the corresponding keyboard key combination such as (ctrl+v) is used.

Before the actual event occurs, the beforecopy, beforecut and beforepaste events can be used to modify the data before sending data to the clipboard or getting data from the clipboard. However, canceling these events will not cancel the operation on the clipboard. Only canceling the copy, cut and paste events can prevent the corresponding operations from occurring.

To access the data in the clipboard, you can use the clipboardData object: in IE, the clipboardData object is a property of the window object; in Chrome, Safari and Firefox 4+, the clipboardData object is a property of the corresponding event pair . However, in Chrome, Safari, and Firefox 4+, the clipboardData object is only valid during handling of clipboard events. This is to prevent unauthorized access to the clipboard; in IE, the clipboardData object can be accessed at any time. To ensure cross-browser compatibility, it is best to only use this object during clipboard events.

This clipboardData object has three methods: getData() method, setData() method and clearData() method. Among them, the getData() method is used to obtain data from the clipboard. It receives a parameter, which is the data format to be obtained. In IE, there are two data formats: 'text' and 'URL'. In Chrome, Safari, and Firefox 4+, this parameter is a MIME type; however, 'text' can be used to represent 'text/plain'.

The first parameter of the setData() method is also the data type, and the second parameter is the text to be placed in the clipboard. For the first parameter, IE still supports "text" and "URL". , and in Chrome and Safari, the MIME type is still supported. However, unlike the getData() method, the setData() method in Chrome and Safari cannot recognize the "text" type successfully. Once it is in the clipboard, it will return true; otherwise, it will return false. Well, let’s look at the following small example.

//获取剪贴板数据方法
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);	}
};

The getClipboardText() method here is relatively simple. It only needs to determine the position of the clipboardData object, and then call the getData() method with the "text" type. Correspondingly, setClipboardText. () method is a little more complicated. After obtaining the clipboardData object, you need to pass in different types for the setData() method according to different browser implementations (for Chrome and Safari, it is "text/plain"; for IE, it is "text"). Having access to the clipboard is useful when you need to ensure that the text you paste into a text box contains certain characters, or conforms to a certain format. For example, if a text box only accepts numeric values, then You must check the pasted value to ensure it is valid. In the paste event, you can determine whether the value in the clipboard is valid. If it is invalid, you can cancel the default behavior as in the following example. HTML code

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

　

JavaScript code

window.onload = function(){
	var oInp = document.getElementById("inp");

	function getClipboardText(event){
		var clipboardData = event.clipboardData || window.clipboardData;
		return clipboardData.getData("text");
	};

	oInp.addEventListener('paste',function(event){
		var event = event || window.event;
		var text = getClipboardText(event);

		if(!/^\d+$/.test(text)){
			event.preventDefault();
		}
	}, false);	
}

Here, the onpaste event handler ensures that only numeric values ​​are pasted into the text box if the clipboard value does not match the regular expression. , the paste operation will be canceled. Chrome, Firefox and Safari only allow access to the getData() method in the onpaste event handler .

Since not all browsers support access to the clipboard, a simpler method is to block one or more clipboard operations. In browsers that support copy, cut, and paste events (Firefox 3+, Safari, Chrome, and IE), it is easy to prevent the default behavior of these events. In Opera, you need to prevent keystrokes that trigger these events, and also prevent the context menu (right-click menu) from being displayed in the text box.

Although clipboard-related events have been included in the HTML5 specification, Opera still does not support clipboard-related events, so practical application is still a headache. This concludes the introduction to the clipboard event of HTML5 actual combat and analysis. For more relevant knowledge about HTML5, please pay attention to the relevant updates of Menglong Station.

The above is the content of HTML5 actual combat and analysis of clipboard events. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!