www.webdeveloper.com
Results 1 to 8 of 8

Thread: Select Text By Index

  1. #1
    Join Date
    Aug 2009
    Posts
    5

    Select Text By Index

    Hi,
    I am having a div. I wanna use javascript to select text inside.

    For IE, is it possible to use createTextRange? If yes, I have a problem on doing that.

    For firefox , I have never had any clue how to do it. No example online work for me.


    <div id=test>
    something is working please </div>


    I wanna do something like function selectText(DivId, startPosition, NumOfCharacters);

    Thanks a million

  2. #2
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    Code:
    function selectText(obj,pos,num) {
    	var text = document.getElementById(obj).innerHTML;
    	alert(text.substr(pos,num));
    }

  3. #3
    Join Date
    Aug 2009
    Posts
    5
    Quote Originally Posted by Nedals View Post
    Code:
    function selectText(obj,pos,num) {
    	var text = document.getElementById(obj).innerHTML;
    	alert(text.substr(pos,num));
    }
    Thanks for your reply. However, can you please read the question.
    I am asking how to SELECT text. Not to extract a substring.

  4. #4
    Join Date
    Aug 2009
    Posts
    30
    with crateRange in IE and getSelection in Firefox you cannot create a selection itself but fetch the content of a selection that had been made by a user

    You will not be able to make Javascript select a text on its own.

    If your goal is to get the content that is described by the params you gave (obj,pos,num) then Nedals version is the way to do it.

    what you could do to fake a selection is replace the content you want to highlight with "<span>content</span>" and set the css for the span in a way hat looks like a selection.

    Code:
    function selectText(obj,pos,num) {
    	var text = document.getElementById(obj).innerHTML;
    	beforeSelection = text.substr(0,pos);
    	selection = text.substr(pos,num);
    	afterSelection = text.substr(pos+num);
    	
    	document.getElementById(obj).innerHTML = beforeSelection + "<span>" + selection + "</span>" + afterSelection;
    }
    if you do that you should ensure that the spans get deleted when the user clicks somewhere in the doc to avoid confusion


    cu
    huckepick

    PS: the replacement thing only works fine if there is only plaintext in the div
    If there is html to render in it it just fails.

  5. #5
    Join Date
    Aug 2009
    Posts
    5
    Thanks for your reply.

    Can someone with more experience help me on that ? Especially on firefox ? I have the code for IE , but I can't find the way to do it in firefox.

    Please... someone with more experience... please give me a hand

    Here is the code how to do it in IE

    <html>
    <script>
    function selectText(ID, start, length)
    {

    //Code for IE and few other

    var textRange = document.body.createTextRange();
    textRange.moveToElementText(document.getElementById(ID));
    textRange.move("character");
    textRange.moveStart("character", start);

    textRange.moveEnd("character", length);
    textRange.select();

    }

    </script>
    <body >
    <div id=tester >This is not a happy task. Please leave me</div>


    <input value="Click Me" onclick="selectText('tester',2,3)" type="button">


    </body>
    </html>

  6. #6
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    The code I provided acomplishes the task as specified. It does NOT need to use 'textRange'

    Perhaps if you were to more clearly specifiy your problem instead of providing proposed YOUR solution, you might get a little better help.

  7. #7
    Join Date
    Aug 2009
    Posts
    5
    Nope. I want the selection action. not a substring. Please read the question carefully

  8. #8
    Join Date
    Aug 2009
    Posts
    5
    PLEASE someone with more experience on FireFox .... give me a hand

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles