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

Is it possible to determine the word the user clicked on

P: n/a
Hello,

Anyone that can think of a way to programmaticaly determine the word on
an HTML page that the user clicked on will be my hero for life.

Leo

Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Jay

<gl****@gmail.com> wrote in message
news:11*********************@o13g2000cwo.googlegro ups.com...
Hello,

Anyone that can think of a way to programmaticaly determine the word on
an HTML page that the user clicked on will be my hero for life.


wouldn't each word have to be inside a container in order to get an event to
fire? say a <div> or a <a href>
You could put each word in a <href> and give it a name attribute. Hope you
don't have too many words!
You could change the text to not be link colour, not be underlined and not
change the cursor using CSS.

You could then find out which word was clicked based on the "name"

Jay
Jul 23 '05 #2

P: n/a
Jay wrote:
<gl****@gmail.com> wrote in message
news:11*********************@o13g2000cwo.googlegro ups.com...
Hello,

Anyone that can think of a way to programmaticaly determine the word on
an HTML page that the user clicked on will be my hero for life.

wouldn't each word have to be inside a container in order to get an event to
fire? say a <div> or a <a href>
You could put each word in a <href> and give it a name attribute. Hope you
don't have too many words!
You could change the text to not be link colour, not be underlined and not
change the cursor using CSS.

You could then find out which word was clicked based on the "name"


If attempting this, <span> would likely be a better element to use as
its effect on styles is more neutral while providing similar
functionality (it can be given an id and onclick).
Here is some play code that puts a <span> around each word, gives it
an ID and an onclick function. Note that it totally screws any
internal markup, but that could be fixed with a better parsing
algorithm - the script just splits on word boundaries, then when
putting stuff back in it only adds spans & onclicks to things that
contain only word characters.

Have fun.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Every word clickable </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function addClicks(){
var x, i=arguments.length;
while ( x = arguments[--i] ) {
addSpans(document.getElementById(x));
}
}

function addSpans(t) {
var s, w = t.firstChild.data.split(/\b/);
var n = t.id;
while (t.firstChild && t.removeChild(t.firstChild));
for (var i=0, len=w.length; i<len; i++){
if ( /\W/.test(w[i]) ) {
s = document.createTextNode(w[i]);
} else {
s = document.createElement('span');
s.id = n + '-' + i;
s.appendChild(document.createTextNode(w[i]));
s.onclick = function() {
alert('This is ' + this.id + ', it contains:'
+ '\n' + this.firstChild.data);};
}
t.appendChild(s);
}
}

</script>
</head>
<body onload="addClicks('p1','p2','p3')">
<p id="p1">here is some text in a document. It will become
clickable when the page loads.</p>
<p id="p2">Counter-measure 63 shows that hyphenated words are
a bother, they get split in two as do decimal numbers like
8797.9879.</p>
<p id="p3">Any HTML markup <b>really</b> makes a mess</p>
</body>
</html>
--
Rob
Jul 23 '05 #3

P: n/a

gl****@gmail.com wrote:
Hello,

Anyone that can think of a way to programmaticaly determine the word on an HTML page that the user clicked on will be my hero for life.

Leo


Not that hard in IE, using a textRange...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

body {
font: normal 14px "comic sans ms";
color: darkred;
}
..silver {
background: silver;
}

</style>
<script type="text/javascript">

function grabword(e)
{
var tgt;
if ((e = e || window.event)
&& (tgt = e.srcElement || e.target)
&& !/((^A$)|(INPUT))/i.test(tgt.tagName))
{
rng = document.body.createTextRange();
rng.moveToPoint(e.x, e.y);
rng.expand('word');
document.forms[0].t.value += '~ ' + rng.htmlText + '\n';
rng.pasteHTML('<span class="silver">' + rng.htmlText + '</span>');
}
}

document.onclick = grabword;

</script>
</head>
<body>
Anyone that can think of a way to programmaticaly determine the word on
an HTML page that the user clicked on will be my hero for life.
<form>
<textarea name="t" style="width:150px;height:300px;overflow:hidden;">
</textarea>
</form>
</body>
</html>

Another matter elsewhere. See if this helps:

http://www.faqts.com/knowledge_base/...html/aid/33674

Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.