Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    EZE
    EZE is offline
    New Coder
    Join Date
    Jan 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Highlight/Select Text

    I have been trying to have a link select a div tag and the text inside it with javascript, and when I click the link, nothing happens. Here is my jscript and a sample combined:
    Code:
    <script type="text/javascript">
    function code_select(obj){
    var itm = document.getElementById(obj);
    itm.select();
    }
    </script>
    <a href="javascript:code_select('code1');">Select</a>
    <div id="code1">Text To Highlight/Select</div>
    How can I have the link select the text without using <textarea>s?

  • #2
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I thought that only worked in <textarea> or <input type=text"> tags. I read you can get what is selected using window.getSelection() but I'm not aware of anyway to change the selection.

    david_kw

  • #3
    EZE
    EZE is offline
    New Coder
    Join Date
    Jan 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, then, I will use a textarea, but how can I(with any code, php, javascript) expand the textarea height to match the text, so the scrollbar never shows up?

  • #4
    New Coder
    Join Date
    Nov 2006
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello EZE,
    You can always make a text appear like selected by using css. In this case, your code would look like,

    <script type="text/javascript">
    function code_select(obj){
    var itm = document.getElementById(obj);
    itm.style.background = "#ff0000"; //would set the background to green
    }
    </script>
    <a href="javascript:code_select('code1');">Select</a>
    <div id="code1">Text To Highlight/Select</div>
    Chandan
    Share knowledge, it only expands

  • #5
    EZE
    EZE is offline
    New Coder
    Join Date
    Jan 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, but I want people to be able to press the highlight code button, then be able to copy the code.

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    IE:
    Code:
    var range = document.body.createTextRange();
    range.moveToElementText(myDiv);
    range.select();
    Firefox, Opera, WebKit nightlies:
    Code:
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(myDiv);
    selection.removeAllRanges();
    selection.addRange(range);
    Safari:
    Code:
    var selection = window.getSelection();
    selection.setBaseAndExtent(myDiv, 0, myDiv, 1);
    This is for any sort of element in general.

  • #7
    EZE
    EZE is offline
    New Coder
    Join Date
    Jan 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I tried the Firefox Script, and it didn't work. Here is what I have:
    Code:
    <script type="text/javascript">
    function code_select(obj){
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(obj);
    selection.removeAllRanges();
    selection.addRange(range);
    </script>
    <a href="javascript:code_select('code1');">Select</a>
    <div id="code1">Text To Highlight/Select</div>

  • #8
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Neat. I didn't know you could do that. :) Here is the FF version and it worked for me. You had a minor but and were trying to use the id string name as the object in your code.

    Code:
    <html>
      <head>
        <title>Junque</title>
        <script type="text/javascript" src="dscommon.js"></script>
        <script type="text/javascript">
          function code_select(sId){
            var selection = window.getSelection();
            var range = document.createRange();
            range.selectNodeContents(document.getElementById(sId));
            selection.removeAllRanges();
            selection.addRange(range);
          }
        </script>
      </head>
      <body>
        <div>
          <a href="javascript:code_select('code1');">Select</a>
          <div id="code1">Text To Highlight/Select</div>
        </div>
      </body>
    </html>
    david_kw

  • #9
    EZE
    EZE is offline
    New Coder
    Join Date
    Jan 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Awesome! It worked! Thanks jkd, david kw, and ChanLFC!

  • #10
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is a version that worked for me in FF1.5, IE6, IE7, and Opera. I don't have Safari to test it but it likely works.

    Code:
    <html>
      <head>
        <title>Select Document Text</title>
        <script type="text/javascript">
          function codeSelect(sId){
            var myDiv = document.getElementById(sId);
            if (window.getSelection) {
              var selection = window.getSelection();
              if (selection.setBaseAndExtent) { /* for Safari */
                selection.setBaseAndExtent(myDiv, 0, myDiv, 1);
              } else { /* for FF, Opera */
                var range = document.createRange();
                range.selectNodeContents(myDiv);
                selection.removeAllRanges();
                selection.addRange(range);
              }
            } else { /* for IE */
              var range = document.body.createTextRange();
              range.moveToElementText(myDiv);
              range.select();
            }
          }
        </script>
      </head>
      <body>
        <div>
          <a href="javascript:codeSelect('code1');">Select</a>
          <div id="code1">Text To Highlight/Select</div>
        </div>
      </body>
    </html>
    david_kw


  •  

    Posting Permissions

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