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 9 of 9
  1. #1
    nca
    nca is offline
    New Coder
    Join Date
    Dec 2003
    Posts
    39
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question Highlight text in form textbox

    I have an html text input box that has text already in it, I want on onload of the page the text to be highlighted so the user will not have to use the mouse at all when the page loads, just simply type to overwrite the text in the text box if needed.

    Code:
    <form action=index.php>
    <input type=text name=field4 value="Text already in here">
    <input type=submit>
    </form>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,015
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by nca View Post
    I have an html text input box that has text already in it, I want on onload of the page the text to be highlighted so the user will not have to use the mouse at all when the page loads, just simply type to overwrite the text in the text box if needed.

    Code:
    <form action=index.php>
    <input type=text name=field4 value="Text already in here">
    <input type=submit>
    </form>
    What do you mean by "highlight"? Do you mean place the focus on that field when the page loads?

    Or do you mean style some fancy border, background or whatever? Note that a textbox or textarea can only support plain text.

    Place your script right before the closing </body> tag as shown to place the focus on the field:-

    Code:
    <input type= "text" name="field4" id = "field4" value="Text already in here">
    
    <script type = "text/javascript">
    document.getElementById("field4").focus();
    </script>
    </body>
    Last edited by Philip M; 05-03-2013 at 06:59 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    nca
    nca is offline
    New Coder
    Join Date
    Dec 2003
    Posts
    39
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Highlight as in Select All

    So when the page loads it will show the field4 box with the text "Text already in here" as highlighted and ready for any keyboard input to overwrite the words "Text already in here"

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,537
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    So did you try Philip's answer?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    nca
    nca is offline
    New Coder
    Join Date
    Dec 2003
    Posts
    39
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Did not work. Here is the complete page:

    Code:
    <html>
    <head><title></title></head>
    <body>
    
    <form action=index.php method=post>
    Check Amount: $<input type=text name=paymentamount value=12.84 size=7 maxlength=6> <input type=submit>
    </form>
    	
    <script type = "text/javascript">
    document.getElementById("paymentamount").focus();
    </script>
    </body>
    </html>

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,537
    Thanks
    77
    Thanked 4,381 Times in 4,346 Posts
    First of all, your HTML is pretty bad.

    You should have "..." around all those values.

    Example:
    Code:
    <input type="text" name="paymentamount" value="12.84" size="7" maxlength="6">
    But the reason your code does not work is right here:
    Code:
        document.getElementById("paymentamount")
    WHERE, in your code, do you seen *ANY* element that has id="paymentamount"???

    Answer: You don't.

    You need to either add an ID to your <input> field or, instead of getElementById, use something like
    Code:
       document.forms[0].paymentamount.focus();
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    nca (05-04-2013)

  • #7
    nca
    nca is offline
    New Coder
    Join Date
    Dec 2003
    Posts
    39
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks Old Pendant! Only one day I hope I am as wise as you.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,015
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by nca View Post
    Did not work.
    Yes it did. The fault, dear Brutus, lies not in the stars ...

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,047
    Thanks
    0
    Thanked 251 Times in 247 Posts
    I think what nca wants is this:
    Code:
    var field = document.getElementById("field4");
    field.focus();
    field.select();


  •  

    Posting Permissions

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