Prevent tab text highlight / disable tab text selection

JavaScript
1

Hi,

Here’s a sample form:

<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

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?

3

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:

<!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

A simple way of doing that is to wait until the event has finished, and to then update the value.


$("#site").focus(function(){
    var input = this;
    if( input.value == input.defaultValue ) {
        setTimeout(function () {
            input.value = 'http://';
        }, 0);
    }
});
5

I’m afraid it doesn’t work in IE.

6

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.

7

In Internet Explorer it doesn’t put the cursor at the end of the text.

8

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