Prevent tab text highlight / disable tab text selection

**Rain Lover** · Apr 21, 2011 12:12

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

**paul_wilkins** · Apr 21, 2011 13:05

Originally Posted by Rain Lover

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?

**Rain Lover** · Apr 22, 2011 12:21

Originally Posted by paul_wilkins

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>

**paul_wilkins** · Apr 22, 2011 14:53

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);
    }
});

**Rain Lover** · Apr 22, 2011 20:04

Originally Posted by paul_wilkins

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.

**paul_wilkins** · Apr 23, 2011 06:38

Originally Posted by Rain Lover

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.

**Rain Lover** · Apr 23, 2011 08:07

Originally Posted by paul_wilkins

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.

**paul_wilkins** · Apr 23, 2011 15:27

Originally Posted by Rain Lover

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

User Tag List

Thread: Prevent tab text highlight / disable tab text selection

Thread Tools

Display

Prevent tab text highlight / disable tab text selection

Bookmarks

Bookmarks

Posting Permissions