By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,698 Members | 1,310 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,698 IT Pros & Developers. It's quick & easy.

javascript select text on mouseover

P: n/a
I want to be able to select a word when I highlight over any part of
the word. When I say select the word, I want it to be highlighted as
if I left clicked my mouse and dragged the cursor along the word. I
want to do this so a user when putting the mouse over the word can
quickly hit <ctrl>c to copy the word, without having to manually
highlight the word.

This will be used multiple times in the script for specific words, not
for every word in the script. For example:

User Password
------- ---------------
admin adminUser
dba sysDbAPa$$

So in my above example when mousing over either of the passwords, the
entire password would be highlighted so I can quickly copy it.

Feb 6 '07 #1
Share this Question
Share on Google+
3 Replies

P: n/a
On Feb 6, 3:09 pm, trp...@gmail.com wrote:
I want to be able to select a word when I highlight over any part of
the word. When I say select the word, I want it to be highlighted as
if I left clicked my mouse and dragged the cursor along the word. I
want to do this so a user when putting the mouse over the word can
quickly hit <ctrl>c to copy the word, without having to manually
highlight the word.

This will be used multiple times in the script for specific words, not
for every word in the script. For example:

User Password
------- ---------------
admin adminUser
dba sysDbAPa$$

So in my above example when mousing over either of the passwords, the
entire password would be highlighted so I can quickly copy it.
Anyone??? Is this even possible, or has anyone seen this done in the
past?

Feb 8 '07 #2

P: n/a
tr****@gmail.com wrote:
On Feb 6, 3:09 pm, trp...@gmail.com wrote:
>I want to be able to select a word when I highlight over any part of
the word. When I say select the word, I want it to be highlighted as
if I left clicked my mouse and dragged the cursor along the word. I
want to do this so a user when putting the mouse over the word can
quickly hit <ctrl>c to copy the word, without having to manually
highlight the word.

This will be used multiple times in the script for specific words, not
for every word in the script. For example:

User Password
------- ---------------
admin adminUser
dba sysDbAPa$$

So in my above example when mousing over either of the passwords, the
entire password would be highlighted so I can quickly copy it.

Anyone??? Is this even possible, or has anyone seen this done in the
past?

It's possible. Your problem is that it's hideously complex and so
doesn't fall into a category that will get an easy answer on the newsgroup.

To give you a starting point here is a script written by Martin Honnen
which will select the contents of any HTML element you pass it. Sample
usage is this..

<pre onClick="selectNode(this)">
blah blah blah
</pre>

When you click on the <preelement it will be selected for easy
clipping into the clipboard.

function selectNode (node) {
//This is a third party function written by Martin Honnen
//In comp.lang.javascript

//http://groups-beta.google.com/group/comp.lang.javascript/browse_thread/thread/2b389e61c7b951f2/99b5f1bee9922c39?lnk=gst&q=(doc+%3D+node.ownerDocu ment)+%26%26+(win+%3D+doc.defaultView)&rnum=1&hl=e n#99b5f1bee9922c39
var selection, range, doc, win;
if ((doc = node.ownerDocument) && (win = doc.defaultView) && typeof
win.getSelection != 'undefined' && typeof doc.createRange != 'undefined'
&& (selection = window.getSelection()) && typeof
selection.removeAllRanges != 'undefined') {
range = doc.createRange();
range.selectNode(node);
selection.removeAllRanges();
selection.addRange(range);
} else if (document.body && typeof document.body.createTextRange !=
'undefined' && (range = document.body.createTextRange())) {
range.moveToElementText(node);
range.select();
}
}

That should at least get you started if you want to pursue it from there.

--
http://www.hunlock.com -- Musings in Javascript, CSS.
$FA
Feb 8 '07 #3

P: n/a
Thanks! That helped me! Here is how I ended up using it:

<span onmouseover="selectNode(this)";
OnMouseOut="clearSelection(this);">blah</span><br>
<span onmouseover="selectNode(this)";
OnMouseOut="clearSelection(this);">blah1</span><br>
<span onmouseover="selectNode(this)";
OnMouseOut="clearSelection(this);">blah2</span><br>
<span onmouseover="selectNode(this)";
OnMouseOut="clearSelection(this);">blah3</span><br>

<script language=javascript>
function selectNode (node)
{
var selection, range, doc, win;

if ((doc = node.ownerDocument) && (win = doc.defaultView) && typeof
win.getSelection != 'undefined' && typeof doc.createRange !=
'undefined' && (selection = window.getSelection()) && typeof
selection.removeAllRanges != 'undefined')
{
range = doc.createRange();
range.selectNode(node);
selection.removeAllRanges();
selection.addRange(range);
}
else if (document.body && typeof document.body.createTextRange !=
'undefined' && (range = document.body.createTextRange()))
{
range.moveToElementText(node);
range.select();
}

}
function clearSelection ()
{
if (document.selection)
document.selection.empty();
else if (window.getSelection)
window.getSelection().removeAllRanges();
}
</script>

So I created an additional function to clear the selection on
OnMouseOut and am using <spantags as the <pretags added an extra
space highlighted at the end of the word, where span does not.
Feb 9 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.