html text box issues

[Kevin Wong]

Hi All

I want to do 2 things with a html text box.

<input type="text" size="20" id="textBox_Search" value="Type Text" />

Further information: I am using IE6 and javascript/html

2 things are
1) How do I automatically highlight the text in the textbox when the page loads but leaves the default value?
But the highlight disappears when I type a value into the input html text.
2) My webpage is being refreshed/resubmitted to the server when I have the cursor in the text box.
How do I stop this?

Some code snippets examples would be great?

Thanks in advance.

Regards
Kevin Wong

[Eric Pascarello]

when you post code please use the code tag button.

Eric

[Eric Pascarello]

1) You use select

var elem = document.forms[0].message;
elem.focus();
elem.select();

2) Not sure what you are talking about, what is causing the refresh? You hitting enter?

Eric

[Cloudgen C.F. Wong]

It sounds very complicated. Let's try to construct a text box with text showing default values, it will be focused on loading and it will be vanished when the form is submitted.

1. In order to memorized the default text to differentiate if the user have modified the textbox or not, the default value should not store in the value attribute of the text box. In this case, I choose the rel property as an example.

2. If the user simply press the delete button, that's the same case as if the user input nothing. It's better to display the default value again.

3. Different colour showing default value show be more user friendly, since it alert the user that he hasn't input anything.

4. The form containing the input box should be added with an automatic script for clearing the content of the text box on submit.

5. I've used the class name "jqy-DefaultText" as illustration.

6. For fast development, allow me to use the jQuery library. Actual this code can be written without any library.

I've added all this to the following code:

<form action="#" method="get">
Your name: <input type="text" name="name" class="jqy-DefaultText" rel="Type Your Name" value=""/><br/>
Your age: <input type="text" name="age" class="jqy-DefaultText" rel="Type Your Age" value=""/><br/>
	<input type="submit" value="store value"/>
</form>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
$(".jqy-DefaultText").each(function(){
	this.setDefault=function(){
		this.value=$(this).css({color:"#AAA"}).attr("rel")
	};
	this.clear=function(){
		if($(this).attr("value")==$(this).attr("rel"))
			$(this).css({color:"#000"}).attr("value","")
	};
	this.isDefault=function(){
		return ($(this).attr("value")==$(this).attr("rel") || $(this).attr("value")=="")
	};
	if(this.isDefault()) this.setDefault();
	else $(this).css({color:"#000"});
	$(this).closest("form").submit(function(){
		$(".jqy-DefaultText").each(function(){
			if(this.isDefault()) this.clear();
		})
	})
}).click(function(){
	this.clear();
}).keydown(function(){
	this.clear();
}).blur(function(){
	if(this.isDefault()) this.setDefault();
	else $(this).css({color:"#000"});
});
$(".jqy-DefaultText:eq(0)").focus().select();
</script>

I've put it online at here