Select (and copy) Form Element Script
November 29th, 15': v1.1, which adds ability to copy anything the user has selected on the page (besides a specific form or DIV element)
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 a text container such as a DIV, or simply anything the user has selected on the page. 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.
Also see: Copy text to clipboard Script
Demos (clicking on any of the indicated controls below copies the selected text to clipboard automatically):
Select All
Directions: 
Insert the following sample CSS to the HEAD section of your page.
Step 2: Add the below HTML markup to the <BODY> of your page, which shows the code for the 4 demos you see above:
The above code references fieldtoclipboard.js (right click, and select "Save As"). The reference to this .js file should be added at the very end of your page, right above the </body> tag as illustrated in the code of Step 2.
And that's a wrap.
More info on calling the script
The key function to call to select and copy the contents of an element is the following:
fieldtoclipboard.copyfield(event, elementref, [callback])
fieldtoclipboard.copyfield() accepts three parameters and
returns a value of false:
event: Enter eithereventornulldepending on whether you wish to show a tooltip or not when a selection has been copied, respectively. The event object must be defined at the time in order for the tooltip to be shown properly (ie: by callingfieldtoclipboard.copyfield()inside theonClickevent handler of an element).- elementref: The "ID" or single object reference of the element
whose content you wish to select, such as "
myfield" ordocument.getElementById("myfield"). -
[callback]: An optional callback function to run when a selection has been copied. The function is automatically passed the contents of the copied text as a parameter. More info below.
Most commonly you'll be calling fieldtoclipboard.copyfield()
inside a control that when clicked on selects the contents of the desired form
or DIV element, for example:
<!-- the control --> <span class="control-copytextarea" onClick="return fieldtoclipboard.copyfield(event, 'select1')">Select</span> <!--the target element --> <textarea id="select1" name="select1" rows=10 cols=35> Some text here. </textarea>
If you wish to trigger the copy action merely by clicking on the target element itself, you can do the following instead:
<!--the target element --> <textarea id="select1" name="select1" onClick="return fieldtoclipboard.copyfield(event, this)" rows=10 cols=35> Some text here. </textarea>
In the later case, we can simply pass in the keyword this as the
second parameter of fieldtoclipboard.copyfield(), instead of
an ID string or object reference to the target element, since the function is
being invoked inside the target element.
You can also select the textual contents of a DIV using the exact same approach as that for form elements, for example:
<!--the target element --> <div id="select4"> Some text here. </div> <!-- the control --> <span class="control-copydiv" onClick="return fieldtoclipboard.copyfield(event, 'select4')">copy</span>
-Copying the currently selected text anywhere on the document v1.1 feature
Apart from selecting and copying the entire contents of a form
element or DIV as shown above, you can also use the script to more loosely
simply copy whatever the user has selected on the page. To do this, call
fieldtoclipboard.copyfield() and pass null for the 2nd
parameter, instead of the ID of the target element. The following button
copies whatever the user has selected on the page:
Some text on the document <!-- the control --> <button onmousedown="fieldtoclipboard.copyfield(event, null)">Copy whatever user selects on page</button>
Demo:
IMPORTANT: When copying the contents of
the user selection, use the event handler onmousedown instead
of onclick inside the corresponding control to properly capture
what the user has selected.
- Callback function
By default after each copy operation the script shows a tooltip temporarily.
You can also run your own custom code as well at this point, by defining a
callback function and passing it as the 3rd parameter inside
fieldtoclipboard.copyfield().
<!--the target element -->
<div id="select4">
Some text here.
</div>
<!-- the control -->
<span class="control-copydiv" onClick="return fieldtoclipboard.copyfield(event, 'select4', function(copiedtext){
console.log(copiedtext) // logs the text copied
})">copy</span>
The function is automatically passed the text the user has selected as a parameter.