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 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Lightbulb Select Text Area

    Good day everyone.
    I am trying to find some help regarding this code:

    ( http://codebelly.com/javascript/selecttextarea.html )
    PHP Code:
     ==========================================
     
    HIGHLIGHTING FORM TEXTAREAS ON MOUSE CLICK
     
    ==========================================
      
     
    Copyright 2001 by www.CodeBelly.com
     
    Do *notremove this notice.



     =============
     
    INSTRUCTIONS:
     =============

     
    Insert the scripts below in the page as notedNo changes
     are needed
    Read through the General Rules for an under-
     
    standing of the requirements.
     
     For 
    multiple instanceschange the function namethe 
     form name
    , and the textarea name for each case.

     
    General Rules:

     
    1.
     The FORM must have a NAME
    ="something" as shown in the
     HTML 
    for the form (belowsee NAME="TheForm").  

     
    2.
     The TEXTAREA must have a NAME
    ="something" as shown in the
     HTML 
    for the form (belowsee NAME="TheText").

     
    3.
     The names used in the form must agree with those used in
     the JavaScript script
    .  See:
       
         
    document.TheForm.TheText.focus();
         
    document.TheForm.TheText.select();

     
    4.
     You can set the text to wrap by setting wrap
    ="on" (or set
     it not to wrap with wrap
    ="off"in the textarea tag.



     ============
     
    THE SCRIPTS:
     ============



     
    Step One The JavaScript Header Script
     
    ---------------------------------------

     
    Put the following script in the head of the page.  The 
     form name 
    and textarea name in the document reference
     in the script must conform to the names used in the 
     form in the body of the page
    .

     <
    script>
     
    // Copyright 2001 by www.CodeBelly.com
     // Do *not* remove this notice.
     
    function selectText(){
     
    document.TheForm.TheText.focus();
     
    document.TheForm.TheText.select();
     }
     
    </script> 



     Step Two - The Link That Selects The Text
     -----------------------------------------

     Use the following code for a link which, when clicked,
     will select the text in the textarea.

     <a href="javascript:selectText()">Click to Select</a>



     Step Three - The Form and Its Textarea
     --------------------------------------

     Put the following form in the <body> of the page where
     you wish the textarea to appear.  Alter the text as
     needed.  Remember that the form name and textarea name
     must agree in the form and in the script.

     <form NAME="TheForm">
     <textarea rows="12" cols="62" NAME="TheText" wrap="off">
     This is the text in the textarea.  Change it to suit.
     </textarea>
     </form> 
    I want to use it on my sites, the problem is, the script only works if there is one textarea on that page.

    And since the name of the form and textarea is already on the header, I am having trouble finding a way on how to make it work with a lot of textareas on the same page, without compromising any of the other textareas.
    I want the script to work on all textareas, but I'm not sure what to do.

    Thank you very much for taking the time to read this. If any of you would be kind enough to modify the script as to make what I'm hoping to get possible, then I would greatly appreciate it. Thank you very much.

    If anyone could do this for me, I would be happy to link/credit you on my new site where I'm going to use the script.
    myspacebrat.com / myspacebrat.net (still working on the site but this is what I got so far.)

  • #2
    New Coder
    Join Date
    May 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try this.

    Code:
    <html>
    <head>
    <script type="text/javascript">
     function selectText(strTxtArea){
     document.getElementById(strTxtArea).focus();
     document.getElementById(strTxtArea).select();
     }
    </script>
    </head>
    <body>
    
    <form NAME="TheForm">
    <table style="width:100%">
    <tr>
     <td>
      <a href="javascript:selectText('txtArea1')">Click to Select Text Area 1</a> 
     </td>
    </tr>
    <tr>
     <td>
      <textarea rows="4" cols="40" id="txtArea1" wrap="off">
      Text in the Text Area 1.  
      Change it to suit.
      </textarea>
     </td>
    <tr>
    <tr>
     <td>
      <a href="javascript:selectText('txtArea2')">Click to Select Text Area 2</a> 
     </td>
    </tr>
    <tr>
     <td>
      <textarea rows="4" cols="40" id="txtArea2" wrap="off">
      Text in the Text Area 2.  
      Change it to suit.
      </textarea>
     </td>
    </tr>
    </table>
    </form> 
    </body>
    </html>


  •  

    Posting Permissions

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