SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question ondblclick with trim problem in firefox

    To put it simply, when a user double clicks a word on my site I want javascript to grab the word via ondblclick, trim the whitespace which usually trails the word, then do some additional stuff with the word.

    In IE, works like a charm. In Firefox(3), no dice. The ondblclick event works fine and reads the word, however, performing the trim seems to fail which terminates the function.

    Here is the code:

    function trim(stringToTrim) {
    return stringToTrim.replace(/^\s+|\s+$/g,"");
    }

    function textSearch {
    //browser selection
    if (window.getSelection) {
    word = window.getSelection();
    }
    else if (document.getSelection) {
    word = document.getSelection();
    }
    else if (document.selection) {
    word = document.selection.createRange().text;
    }
    else return;

    //check the word and trim it
    if (word != '') {
    word = trim(word);
    alert(word);
    }
    }

    I've tried several different ways of doing the trim but all work the same. If I comment out the trim part of the function the alert shows up fine. With the trim function in place I never get the alert.

    Now for the interesting part. If I set a variable to a string the trim works fine and the alert pops. Apparently this is only a problem when reading the text from the ondblclick event.

    Any help is much appreciated!!!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    At a quick glance, the textSearch function is missing parenthesis.
    The getSelection method returns a selection object, not a string so that's where another problem is going to occur. Convert the getSelection to a string and you should be fine.

    the word variable is also going to be a global variable the way things currently are, so declare it in the function to ensure that it stays within the scope of that function.

    Code javascript:
    function textSearch() {
        var word = '';
        //browser selection
        if (window.getSelection) {
            word = window.getSelection().toString();
        }
        else if (document.getSelection) {
            word = document.getSelection().toString();
        }
        ...
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your a life saver! Its working perfectly!

    Its amazing what IE lets you get away with...

  4. #4
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I use the getSelection code...

    theSelection = window.getSelection().toString()

    ...on some text displayed as part of a web page, it works fine and I get the desired string. But I want to obtain the text highlighted in a textarea input field, and the getSelection() doesn't find it.

    The IE code...

    theSelection = document.selection.createRange().text

    ...works fine in both cases though.

    Can anyone tell me if there is there a getSelection method that will return highlighted text in a textarea box?

    Thanks for any help

  5. #5
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this bit of code. I've tested it on both IE and FF and both return the selected text.


    Code:
    <html>
    <head>
    </head>
    <body>
    <form name="F">
    <textarea name="TA" rows="5" cols="40">
    Textarea text selection test.
    Test for textarea text selection.
    </textarea>
    <input type="button" value="show selection"
    onclick="var ta = this.form.TA;
    if (document.selection) {
    var range = document.selection.createRange();
    if (range.parentElement() == ta)
    alert(range.text);
    }
    else if (ta.selectionEnd - ta.selectionStart)
    alert(ta.value.substring(ta.selectionStart, ta.selectionEnd));"
    >
    </form>
    </body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks, that works just fine, and I appreciate your taking the time to write something bespoke to find a solution

    I intend to add some text to their selection, and then to replace the selection in the textarea box with the augmented text. From your example I think I will be able to do that.

    Thanks again


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •