Select (and copy) Form Element Script
Updated on July 10, 2016
Description: This script makes it easy for users to select and copy to clipboard the contents of a form element, such as an INPUT type or textarea element, with a click of the mouse. As an added bonus, the script also works on selecting/ copying the contents of atext container such as a DIV. Simply define the desired control such as a link or button that when clicked on performs this action, and off you go! The script works in all modern browsers, and IE9+. It has no dependencies.
+ Note: iOS devices currently don't support copying to clipboard via scripting, so the script will only select the contents of form fields in those devices, but not copy.
Demo (clicking on any of the indicated controls below copies the selected text to clipboard automatically):
Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time. --Thomas A. Edison
copy all
Directions:
Insert the following sample CSS to the HEAD section of your page.<style>Step 2: Add the below HTML markup to the <BODY> of your page, which shows the code for the 4 demos you see above:
/* Demos styles. Remove if desired */
/* demo #1 textarea */
.control-copytextarea{
cursor: pointer;
font-weight: bold;
padding:3px 10px;
border-radius: 5px 5px 0 0;
background: darkred;
color: white;
display: inline-block;
box-shadow: 0 0 3px gray;
}
/* demo #2 input text with control */
#select2{
line-height: 25px;
font-size: 105%;
width: 95%;
max-width: 500px;
margin: 0;
}
.control-copyinput{
cursor: pointer;
font-weight: bold;
padding:3px 10px;
border-radius: 8px;
background: darkred;
color: white;
display: inline-block;
box-shadow: 0 0 3px gray;
line-height: 25px;
}
/* demo #3 input text only */
fieldset{
width: 95%;
background: lightyellow;
max-width: 600px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#select3{
font-size: 105%;
margin: 0;
width: 90%;
max-width: 500px;
}
/* demo #4 regular div */
#select4{
width: 200px;
border: 1px solid orange;
padding: 5px;
background: lightyellow;
}
.control-copydiv{
cursor: pointer;
margin-top: 8px;
display: inline-block;
border: 1px solid red;
color: red;
padding: 2px 5px;
border-radius: 3px;
margin-top: 8px;
background: white;
}
</style>
<!-- demo #1 textarea -->Step 3: Add the below HTML markup to the <BODY>
<span class="control-copytextarea" onClick="return fieldtoclipboard.copyfield(event, 'select1')">Select All</span><br>
<textarea id="select1" name="select1" rows=10 cols=35>
There is no passion to be found playing small - in settling for a life that is less than the one you are capable of living. --Nelson Mandela
</textarea>
<br /><br />
<!-- demo #2 input text with control -->
<input id="select2" name="select2" type="text" value="http://www.dynamicdrive.com/dynamicindex11/selectform.htm" size="35" />
<span class="control-copyinput" onClick="return fieldtoclipboard.copyfield(event, 'select2')">Copy</span>
<br /><br />
<!-- demo #3 input text only -->
<fieldset>
<legend>Share this URL. Click to copy to clipboard!</legend>
<input id="select3" name="select3" type="text" value="http://www.dynamicdrive.com/dynamicindex11/selectform.htm" size="35" onClick="return fieldtoclipboard.copyfield(event, this)"/>
</fieldset>
<br /><br />
<!-- demo #4 regular div -->
<div id="select4">
Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time. --Thomas A. Edison
</div>
<span class="control-copydiv" onClick="return fieldtoclipboard.copyfield(event, 'select4')">copy</span>
<script type='text/javascript'>More detail (source)
//<![CDATA[
var fieldtoclipboard = {
tooltipobj: null,
hidetooltiptimer: null,
createtooltip:function(){
var tooltip = document.createElement('div')
tooltip.style.cssText =
'position:absolute; background:black; color:white; padding:4px;z-index:10000;'
+ 'border-radius:3px; font-size:12px;box-shadow:3px 3px 3px rgba(0,0,0,.4);'
+ 'opacity:0;transition:opacity 0.3s'
tooltip.innerHTML = 'Copied!'
this.tooltipobj = tooltip
document.body.appendChild(tooltip)
},
showtooltip:function(e){
var evt = e || event
clearTimeout(this.hidetooltiptimer)
this.tooltipobj.style.left = evt.pageX - 10 + 'px'
this.tooltipobj.style.top = evt.pageY + 15 + 'px'
this.tooltipobj.style.opacity = 1
this.hidetooltiptimer = setTimeout(function(){
fieldtoclipboard.tooltipobj.style.opacity = 0
}, 700) // time in milliseconds before tooltip disappears
},
selectelement:function(el){
var range = document.createRange() // create new range object
range.selectNodeContents(el)
var selection = window.getSelection() // get Selection object from currently user selected text
selection.removeAllRanges() // unselect any user selected text (if any)
selection.addRange(range) // add range to Selection object to select it
},
copyfield:function(e, fieldref, callback){
var field = (typeof fieldref == 'string')? document.getElementById(fieldref) : fieldref
callbackref = callback || function(){}
if (/(textarea)|(input)/i.test(field) && field.setSelectionRange){
field.focus()
field.setSelectionRange(0, field.value.length) // for iOS sake
}
else if (document.createRange){
this.selectelement(field)
}
var copysuccess // var to check whether execCommand successfully executed
try{
copysuccess = document.execCommand("copy")
}catch(e){
copysuccess = false
}
if (copysuccess){ // execute desired code whenever text has been successfully copied
if (e){
this.showtooltip(e)
}
callbackref(field.value || window.getSelection().toString())
}
return false
},
init:function(){
this.createtooltip()
}
}
fieldtoclipboard.init()
//]]>
</script>