Demo: ma125120. Making. IO/ma – dom/test…

This method mainly uses Range object and HTML5 Selection API. After testing, this method works well in mainstream browsers such as Google Chrome, Firefox, 360 Secure browser and Sogou High-speed browser.

First attached is the code you want to see:

function copy(el) {
	var range = document.createRange();
	var end = el.childNodes.length;
	range.setStart(el,0);
	range.setEnd(el,end);

	var selection = window.getSelection();
	selection.removeAllRanges();
	selection.addRange(range);
	document.execCommand("copy".false.null);
	selection.removeRange(range);
}
Copy the code

Implementation steps

  1. We first create a Range object using ** document.createrange ()**, then get the size of the children of the element we want to copy, and then call the setStart and setEnd methods of the Range object to set the size of the selected area.
  2. Window.getselection () is used to generate a Selection object, but it is not actually selected in the window. It’s best to call before adding constituencies selection. RemoveAllRanges () to remove the other districts, or the browser may issue the following warning, then call the selection object of addRange method, will step on the range as the incoming parameters, The element you want to copy is actually set to the selected region.
  3. Document. execCommand can now be used to copy text from the selected area to the clipboard.
  4. Finally, you need to call the removeRange method of the Selection object to remove the Range object, ensuring that there is always only one selected element in the selected area. Otherwise, some browsers may issue a warning or error the next time there are two selected elements.

Other situations

This code applies to non-form elements. For form elements, you don’t need to use the Selection API, just use el.select(); document.execCommand(“copy”,false,null); Can be, combined together is

function copy(el) {
    if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
        el.select();
    } else {
        var range = document.createRange();
    	var end = el.childNodes.length;
    	range.setStart(el,0);
    	range.setEnd(el,end);
    
    	var selection = window.getSelection();
    	selection.removeAllRanges();
    	selection.addRange(range);
    }
	
	document.execCommand("copy".false,null);
	range && selection.removeRange(range);
}
Copy the code

Pay attention to

—

This function must be called after a button click or after a click with user-SELECT: None attribute, otherwise the browser may issue a warning like this: [Deprecation] The behavior that Selection.addRange() merges existing Range and the specified Range was removed. See www.chromestatus.com/features/66… for more details.

Github address: github.com/ma125120/ma… .

Subsequent complement

This feature is actually quite basic, but if you want to do something a little more complete, like add some extra text to the end after copying the content, you can use a feature in my other library, copy.js. The usage method is described in readme.md.

If you have any questions, please leave them in the comments section below.