Copy to clipboard in javascript

A common requirement in Web applications is to copy some text to the clipboard. For security reasons this has traditionally been hard to do. The preferred solution is to call document.execCommand('copy') when the text of an text input or textarea is selected. This is supported in most modern browsers. Since I couldn't get this to work in jQuery the solution here uses pure javascript instead. In cases where the browser doesn't support execCommand it will return false or raise an exception. In either case the fallback is to prompt the user to copy the text in question manually. This can be done easily on an iPad by tapping once to get "select all" and then tap again to copy. A lot of solutions suggest "ctrl-c" but on tablets this is usually not possible.

This method creates an input field momentarily, copies and then removes it. In the case of failure it will hang around until the user clicks "OK' or "cancel" in the prompt dialog. If that's uncosmetic then just style the text field to appear off-screen. For example, add to the CSS for your page: input.secret {position:absolute;left:-1000px}. Unfortunately you can't hie it completely because otherwise select won't work and the document.execCommand('copy') will fail silently.

function copyText( text ) { var textField = document.createElement('input'); textField.setAttribute("type","text"); // set a class attribute and style it so it *may* appear off-screen textField.setAttribute("class","secret"); textField.value = text; document.body.appendChild(textField); textField.select(); try { if ( !document.execCommand('copy') ) { window.prompt("Auto copy failed. Please copy the url manually",text); } textField.parentNode.removeChild(textField); } catch (err) { window.prompt("Auto copy failed. Please copy the url manually",text); } };