Click and copy Javascript.

I work as a tech support agent to provide support for a nationwide Internet service provider. As part of my work I document each call with a quick summary of what takes place during each call. Over time I found myself using the same dispositions and thought there ought to be a way of copying them to the clipboard for easy pasting later.
I’ve always known that it’s possible to use Javascript to copy text to the clipboard with the click of a mouse. This article gave me plenty of food for thought but still left me on my own for creating multiple instances of the same script. I’m still a novice when it comes to Javascript, so some additional scouring of the Web was required. Soon I came across a variation of the script that allows you to choose from several blocks of text you wish to copy.
Then I decided to take the script one step further and create a table with cells to store each block of text I wanted copied. Before I knew it I had my own handy gadget for pasting  frequently used dispositions, from hang-ups to requests to be removed from the calling list. It works like a charm.
This is a simplified version of my modified script that creates a 2×3 table for storing 6 blocks of text. You can easily expand the table by copying the appropriate lines, keeping in mind to keep the button values (Button01) and ID variables (CopyIt1) unique.

<html>
<title>Clipboard Copy</title>
<BODY text="#000000" bgcolor="#FFFFFF" link="#000000">
<script>
function Copy(n){
copyme=n
textRange = document.body.createTextRange();
textRange.moveToElementText(copyme);
textRange.execCommand("Copy");
}
</script>
<table border="1" cellpadding="5" cellspacing="5" width="100%">
<caption></caption>
<tr>
<td><input type=BUTTON onclick=Copy(Copyit1) value="Button01">
<br><div id=Copyit1>TextBlock01</DIV></td>
<td><input type=BUTTON onclick=Copy(Copyit2) value="Button02">
<br><div id=Copyit2>TextBlock02</DIV></td>
<td><input type=BUTTON onclick=Copy(Copyit3) value="Button03">
<br><div id=Copyit3>TextBlock03</DIV></td>
</tr>
<tr>
<td><input type=BUTTON onclick=Copy(Copyit4) value="Button04">
<br><div id=Copyit4>TextBlock04</DIV></td>
<td><input type=BUTTON onclick=Copy(Copyit5) value="Button05">
<br><div id=Copyit5>TextBlock05</DIV></td>
<td><input type=BUTTON onclick=Copy(Copyit6) value="Button06">
<br><div id=Copyit6>TextBlock06</DIV></td>
</tr>
</table>
</body>
</html>

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s