JS copies the content of the corresponding id to the clipboard (Ctrl + C effect), jsctrl

JS copies the content of the corresponding id to the clipboard (Ctrl + C effect), jsctrl

Preface

Recently, I made a button to achieve the effect of copying the url to the clipboard after clicking it. Instead of the url of the current page, it corresponds to the url of an element, and a page has multiple URLs. At first, I found a method, but it was actually compatible with IE. It was amazing that there was something that was compatible with IE. Later I found a plug-in named zeroclipboard. js, but it was a little troublesome.

Finally, I turned to a method encapsulated by js, which is effective!

The following html code is used to achieve the following effect:

<Tr> <td> <a id = "copy _ {$ key}" onclick = "getUrl ('{$ key }') "> copy file link </a> <input id =" file _ {$ key} "value =" {$ file. file_url} "style =" margin-left:-9999px "/> </td> </tr>

Click the copy file link button to copy the value in the input box, which is a url passed in. First, clicking the tag triggers the getUrl function; the input id is used to locate the corresponding input value (because multiple td files are traversed, many input boxes are retrieved one by one ).

The following js Code:

<Pre> <script type = "application/javascript"> function getUrl (id) {if (copyToClipboard (document. getElementById ("file _" + id) {alert ("copied to clipboard! ");} Else {alert (" failed to copy to clipboard! ") ;}} Function copyToClipboard (elem) {// create hidden text element, if it doesn' t already exist var targetId =" _ hiddenCopyText _ "; var isInput = elem. tagName = "INPUT" | elem. tagName = "TEXTAREA"; var origSelectionStart, origSelectionEnd; if (isInput) {// can just use the original source element for the selection and copy target = elem; origSelectionStart = elem. selectionStart; origSelect IonEnd = elem. selectionEnd;} else {// must use a temporary form element for the selection and copy target = document. getElementById (targetId); if (! Target) {var target = document. createElement ("textarea"); target. style. position = "absolute"; target. style. left = "-9999px"; target. style. top = "0"; target. id = targetId; document. body. appendChild (target);} target. textContent = elem. textContent;} // select the content var currentFocus = document. activeElement; target. focus (); target. setSelectionRange (0, target. value. length); // copy the selection var succeed; try {succeed = document.exe cCommand ("copy");} catch (e) {succeed = false ;} // restore original focus if (currentFocus & typeof currentFocus. focus = "function") {currentFocus. focus ();} if (isInput) {// restore prior selection elem. setSelectionRange (origSelectionStart, origSelectionEnd);} else {// clear temporary content target. textContent = "" ;}return succeed ;}</script> </pre>

The encapsulated copyToClipboard method is called in getUrl to implement the function. One thing is that the style of input in html is hidden by style = "margin-left:-9999px, because I don't know why to hide it with type = "hiden" or display = "none", only the source code is obtained instead of the value traversed by the dynamic url.

Summary

The above is all about this article. I hope this article will help you in your study or work. If you have any questions, please leave a message.