Clear Field on Focus
<input type="text" onfocus="if(this.value == 'value') { this.value = ''; }" value="value" />Replace "value" with the default value. If the field is selected, the default value will go away. If the user has previously changed the field value, it'll be left alone.
Alternatively, use onfocus="this.value='';" to always clear the field.
What about having ONBLUR as well? Just in case the user doesn’t enter anything and leaves the field.
function clearText(field){
if(field.defaultValue == field.value){
field.value = “”;
}
else if(field.value == “”){
field.value = field.defaultValue;
}
}
if we have many input, textarea. It works for both on focus and blur.
As;
comment portion
It is very simple. Only we define a script and put it in head.
Sorry, my code did not show up. Let me try again…
What if the field is connected to a table and the iput field is pre defined?
Example: I have a field “S” that comes up null in a web page, the user makes a mistake and instead of going back and highlighting and deleting they could just click the reset button. If I use input type=”text” it just creates another blank field. I want it to reference the predefined field.
Thank you so much for this I know its a very basic command to add but I was struggling to find out why it wasn’t working, but I just copied and pasted yours and viola no problems!
I also used the:
onblur=”if(this.value == ”) { this.value = ”; }” value=”value”
so that it goes back to the original if nothing is typed in!
@mgpwr
Sorry to sound really amateur…
But.. I can’t seem to make this work, I’ve got a PHP Form, the PHP is in the page… and I dont know why it wont work.
Do I need to do
I’d appreciate if someone would help me out.
Sorry for being such amateur on this :)
I dont know how to add Code into this post..
I ment to put
Script type=”"
/script
But with
Saved my ass!
Thanks so much for this! Very useful. :)
To be more generic, a la jquery:
var el = $(“input[type=text], textarea”);
el.focus(function(e) {
if ($(this).value == $(this).defaultValue)
$(this).value = “”;
});
el.blur(function(e) {
if ($(this).value == “”)
$(this).value = $(this).defaultValue;
});
Finally got both working. Onblur and onFocus. Thanks Chris!
Actually at least for jQuery 1.6.2. the generic snippet should look like this:
Or if you want to use $(this), it should be $(this)[0] but that looks ugly.
I was messing my script for input text, but yours here was very helpfull. Thanks!
Thanks, this is clean and simple.
Question – How do you set the onblur so that the value stays or appears back in the field if the user decides not to type anything? ~ thanks
This is the code I use, it does exactly what you’re asking:
input type=”text” value=”First Name” name=”fname” class=”text_field” onfocus=”if (this.value == ‘First Name’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘First Name’;}”
Fore textareas….
textarea name=”message” class=”text_area” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;” cols=”72″ rows=”11″>Type your message here…
Sorry for the lack of brackets, I don’t know how to insert code here.
You rock! ~ Thanks
For the record, this is the code/syntax that I’m using:
<input type=”text” name=”Search” class=”searchbox” onfocus=”if(this.value == ‘Search Artist’) { this.value = ”; }” onblur=”this.value=!this.value?’Search Artist’:this.value;” value=”Search Artist” />
Works great!
Thanks. Very helpful.!
does this work on form fields. i currently have the field at onfocus=”cl(this) – works for removing the text, but not for adding it back
how to make the default value into color gray??
thanks its usefull stuff!!!
I’m using this in my form:
input name=”example” type=”text” id=”example” value=”example” onFocus=”if(this.value == ‘example’) {this.value = ”;}” onBlur=”if (this.value == ”) {this.value = ‘example’;}”
… what do I do to not have this “example: example” sent to recipient email if not filled in?
Thank you for all this usefull help!
(new to this)
function change(i){
if(i.value == ”){ i.value = ‘Search…’; }
}
function change2(i){
if(i.value == ‘Search…’){ i.value = ”; }
}
this is my version and is so simply and nice :
it looks very clean and logic, but where to place it. I have a ccs contact site,
and I can make none to work.
I just want the names: “Name, Email, and content appear grey inside the boxes, but for some reason non of the examples given work.
this is my html:
Name:
Email:
Comments:
this is my css:
form {
/*margin: 20px 0 0 40px;*/
font-family: Verdana;
font-style : normal ;
font-size : 0.865em;
font-weight :550;
text-align : left;
color: #000000}
input { margin: 4px;
max-width: 100% }
textarea {
max-width: 100%
}
Wow, this was just what I was looking for. It worked perfectly for me!
Thanks!
can you change another element like div or ul if you focus on a textbox?
I wanna change my li width if I focus on my textbox
Home
About
Contact <—change this width
<– if this is focused
nice one. But I want to do something like your Contact Form. Like when someone is not in text bix then it should display watermark image, when we enter text, image goes out. But if someone leaves the text box empty, then the watermark comes back. ?
Use Javascript for watermark.
It works onfocus, and onblur.
You just should keep your default string in the “name” attribute.
I used jQuery just to get the elements or attributes, but you can also use standard techniques such as “getElementBy***”.
$(‘input’).focus(function(){
if($(this).val()==$(this).attr(“name”)){
$(this).val(“”);
$(this).css(“color”,”#141310″);
}
$(this).blur(function(){
if($(this).val()==”"){
$(this).val($(this).attr(“name”));
$(this).css(“color”,”#9A9A9A”);
}
});
});
thanks @Artem. Just got it all figured out yesterday, using the same and implemented it in the top-bar of website.
http://www.udaipurtimes.com
Thanks for the reply, mate. :)
Hi
I want to do this on a form built by webform module of Drupal7. Because this is built by the module, I cannot add the jscript tags of onblur or onfocus to the text fields. The site is not online, so cannot post the url here.
Please help me on how to do this. If this is possible by php, that would be OK too, as I have the main template.php file with me. But I would prefer jquery.
thanks
i wanna help
if user enter number on box then another box will be focus how can i do
Hi,
This is great thanks! One question though . . . the page defaults pass through the form validation (the form can be submitted with the default values) . . . Is there a string you can append so validators don’t recognize this as user value?
KW
Why don’t you use the placeholder attribute? f.e. <br/>
<br/>
< input placeholder=”Hello world!” />
<br/>
<br/>
This sets the text in between quotes in the input field, as long as the user didn’t type anything. As soon as he starts typing, the text dissapears (hence placeholder).
Note: If you want to clear the field on focus everytime (not just before the user has typed something already), the suggested solution may work better.
placeholder= works well but isn’t cross browser compatible.
Thanks, was very helpful!
Paul Clapp, it’s 2013, ‘placeholder’ works in almost every browser and mobile device.