How To Clear A Field In Javascript
Comments
How To Clear A Field In Javascript
Source: https://css-tricks.com/snippets/javascript/clear-field-on-focus/
Posted by: dicarlothendre.blogspot.com
Home
› How To Clear A Field In Javascript
Subscribe to:
Post Comments (Atom)
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
thanks for the add Sheffield! … I inserted your "onblur" code in there and found it didn't work for me… but then I noticed that the "curly brackets" needed to be tweaked in order for it to work for me:
onblur="if(this.value == ") { this.value = 'value'; }" value="value"
@Jamie – Sheffield's Line just has a little typo. He had one double quote where there should be a single quotes.
Do this:
Instead of this:
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
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.
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!
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.
Evan, "placeholder" doesn't work in Internet Explorer… (I don't know why people still use it!)
I managed to get my opt-in form to have this, so proud! Couldn't have done it without this tip, thank you so much!
Hello!
I am using an embedded form, therefore, I don't have access to the html.
I am trying to tweak the CSS code above to clear my form fields.
Here is an example of my html code for a line item……..can someone please assist with the CSS code?
Much appreciation,
JK
It didn't take my code for some reason: Maybe I'll leave out the "<"
input type="text" class="hs-input" required="required" name="state" value="state"
I have a mini cart in the upper right of my page. After customers select the items they want to purchase off the page (there can be many selections), the items are passed to the mini cart, but the form does not clear. I have tried numerous javascripts to reset the input fields back to blank, but none seem to work. It has been suggested that another script is interfering, but I have no script errors on the page. The only script for the mini cart is a window.focus (). Could that be the issue?
After reading through posts at the snippets here I have pieced the following together which works great. I am my case I am using it for a simple search field.
<input type="text" onfocus="if(this.value == 'Search This Site') { this.value = ''; }" class="form-control" onBlur="if(this.value == '') { this.value = 'Search This Site'; }" value="Search This Site">At the onset, I am a novice at website building and ALL my work is based on help from people and forums like you!
I have been using the following function for my webforms:
onfocus="if(this.value==defaultValue) {this.value=";}" onblur="if(this.value==") {this.value=defaultValue}"
The problem is that the form-fields are getting validated with the default values, for eg. if the field is populated with "Name", the visitor can proceed without entering his name in the form field despite it being a mandatory field. (You can check it on the contact form on the home page of http://www.kaamwaala.com).
Can someone please help me with validation by suggesting required changes in the html code I have been using.
Thanks…you will be a life saver here!
Hey I am trying to do this within a function, but it doesn't work right.
function prüfe_inhalt() {if (check()) {
alert ("No same numbers allowed. Please type another number.");
this.value ='';
}
}
Now i have an
It appears that "this" doesn't refer to the input anymore ..
last try
input type text value empty onblur prüfe_inhalt
to clear on focus and will put the value back if nothing is entered on unfocus
value="First Name" onfocus="if(this.value==this.defaultValue)this.value=";" onblur="if(this.value==")this.value=this.defaultValue;"
Just tested and this works. Very helpful, thanks for sharing.
how to use this way once that my input is server side :
how to use this way when my input is server side .
because i want get textbox value in Code-behind.
clearText = function(field){
field.value = ";
field.onfocus = function() {};
}
and
onfocus='clearText(this);'
only remove (simply) first initialisation !
Yeah great with onblur on an opt in form. Thanks.
Don't ever clear the field on focus! It makes it impossible to correct a spelling mistake once the field has been blurred without rewriting everything. Instead just select all on focus and the user can chose between just type and replace the content or change the selection and only modify parts of it.
Also never select the whole field on click. It prevents users from selecting within the field. If you want all text to be selected do it on focus.
I am subscriber to wufoo form. I created a form and added a predefined value. When I click on the field the text remains and it has to be deleted by using backspace. Is there any way I can delete it using css or add script to the form.
Thanks
these matters into his own hands as they hope CSS
In case we do not want to use JavaScript
necessary
I needed an input field with a text value of N/A inside (not a placeholder) that would clear the N/A and allow a user to type whatever they want, but that would put the N/A back in, if they decided to delete anything they wrote. Using some of the above answers and a piece of my own, this works perfectly for me:
onFocus="value=''" onblur="this.value=!this.value?'N/A':this.value;" value="N/A"wht about if the input is a date and not a text field?