SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Prevent tab text highlight / disable tab text selection

    Hi,

    Here's a sample form:

    Code:
    <form action="#" method="post">
    Name:<br />
    <input type="text" name="name" value="your name" /><br />
    E-mail:<br />
    <input type="text" name="mail" value="your email" /><br />
    <input type="submit" value="Send"> 
    </form>
    When you tab to a text input, the value gets highlighted. How can it be disabled?

    Any help is appreciated!
    Mike

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    When you tab to a text input, the value gets highlighted. How can it be disabled?
    More info required.

    What do you want to be done instead?

    Do you want the text to be removed while the field is active?
    Do you want the insertion bar to be placed at the end of the text?
    Do you want the insertion bar at the start of the text?
    Do you want the field itself to be disabled?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    More info required.

    What do you want to be done instead?

    Do you want the text to be removed while the field is active?
    Do you want the insertion bar to be placed at the end of the text?
    Do you want the insertion bar at the start of the text?
    Do you want the field itself to be disabled?
    Dear Paul,

    Q1: No.
    Q2: Yes.
    Q3: No.
    Q4: No.

    What I want is what you get on a focus by mouse.
    And if you don't mind let's consider the following form:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
      <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
    
      <script>
      $(document).ready(function(){
    $("#site").focus(function(){
    	if( this.value == this.defaultValue ) {
    		$(this).val("http://");
    	}
    });
      });
      </script>
      
    </head>
    <body>
      
    <form action="#" method="post">
    <input type="text" id="name" /><br />
    <input type="text" id="site" value="Website" /><br />
    <input type="submit" value="Send"> 
    </form>
    
    </body>
    </html>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    A simple way of doing that is to wait until the event has finished, and to then update the value.

    Code javascript:
    $("#site").focus(function(){
        var input = this;
        if( input.value == input.defaultValue ) {
            setTimeout(function () {
                input.value = 'http://';
            }, 0);
        }
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    A simple way of doing that is to wait until the event has finished, and to then update the value.

    Code javascript:
    $("#site").focus(function(){
        var input = this;
        if( input.value == input.defaultValue ) {
            setTimeout(function () {
                input.value = 'http://';
            }, 0);
        }
    });
    I'm afraid it doesn't work in IE.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    I'm afraid it doesn't work in IE.
    Is it the jquery reference that doesn't work, or the code that I provided. And which version of IE? The code that I provided most definately does work in IE9, IE8, IE7 and IE6

    Currently that code will prevent the text being highlighted when the default value is replaced.
    If you want it to always prevent the text being highlighted on that field, then you will need to move the if statement inside the setTimeout event and always update the value from within it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Do you want the insertion bar to be placed at the end of the text?
    In Internet Explorer it doesn't put the cursor at the end of the text.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    In Internet Explorer it doesn't put the cursor at the end of the text.
    Ahh, that's a different problem from the highlighting one that was initially stated.

    I don't think I can help with putting the cursor at the end of the text
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •