Is it possible to determine the word the user clicked on

Discussion in 'Javascript' started by glevik@gmail.com, Apr 19, 2005.

  1. Guest

    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
    , Apr 19, 2005
    #1
    1. Advertising

  2. Jay Guest

    <> wrote in message
    news:...
    > 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
    Jay, Apr 20, 2005
    #2
    1. Advertising

  3. RobG Guest

    Jay wrote:
    > <> wrote in message
    > news:...
    >
    >>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) ) {
    s = document.createTextNode(w);
    } else {
    s = document.createElement('span');
    s.id = n + '-' + i;
    s.appendChild(document.createTextNode(w));
    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
    RobG, Apr 20, 2005
    #3
  4. RobB Guest

    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/view.phtml/aid/33674
    RobB, Apr 20, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Daniel Walzenbach
    Replies:
    2
    Views:
    8,609
    Steven Cheng[MSFT]
    Jun 2, 2004
  2. Wayne  Wengert

    Determine RadioButton Clicked

    Wayne Wengert, Mar 17, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    378
    Wayne Wengert
    Mar 17, 2005
  3. Jim Mitchell

    How to determine which control in a template column was clicked...

    Jim Mitchell, Jul 28, 2003, in forum: ASP .Net Datagrid Control
    Replies:
    2
    Views:
    119
    Joel .NET
    Oct 29, 2003
  4. Daniel Walzenbach

    How to determine which cell was clicked in as ASP.NET DataGrid

    Daniel Walzenbach, Jun 1, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    4
    Views:
    170
    Daniel Walzenbach
    Jun 3, 2004
  5. Samuel
    Replies:
    6
    Views:
    225
    Steven Cheng[MSFT]
    Jul 28, 2005
Loading...

Share This Page