When you want onClick clear input field using JavaScript. Or when you want onBlur get back original values by JavaScript. As JavaScript is a very powerful scripting language for your HTML pages. We are going to explain different methods in this article to clear default value or get back default value onBlur. So we can easily clear textbox or input field and restore also if nothing was entered. Let’s explore different ways to do this awesome thing with JavaScript.
There are several methods to clear JavaScript input fields on click. Let’s explore them in detail below.
Use Placeholder
Placeholder is a different attribute than value to input fields type (text, password, email, phone) and also textarea. The problem can be when you want to submit default value from a form if user intend to leave that field empty. Placeholder value does not submit with form submission. But if that’s not a problem to send default value then placeholder is a great thing to test.
<input type="text" placeholder="I am placeholder..." />Placeholder Example
In above example a simple text input field using the HTML attribute placeholder. Again this placeholder’s text or value will be not sent with form’s submission.
Inline JavaScript onClick clear text field value
Inline JavaScript to clear value of text field on click is really simple but works great. As you should know HTML’s attribute onClick actually calls the JavaScript means you can run JavaScript with onClick attribute. Let’s take an example of inline JavaScript to clear the value.
<input type="text" value="Search here.." onclick="this.value=''" />Above input text field have a default value Search here … and onClick says this.value=” which will make value of this text field empty once clicked. This method can be used for textarea and other form fields like password, email, phone etc also. The problem with this method is when you click on field it will make that field empty. If you don’t write something and leave the field that will remain empty. Furthermore if you write something and leave and again click on that field it will remove your entered data also.
Example Inline JavaScript clear value
Inline JavaScript get default text field value back onBlur if empty
Yeah this can be a problem if user click on a text field or text area, and enter nothing then change focus field. So if the text field or textarea or phone, email field was left empty then default value should come up onBlur. So in this example we will retrieve default value if field was left empty onBlur.
<input type="text" value="Search here.." onclick="this.value=''" onBlur="if(this.value == '') {this.value = 'Search here ...'}" />In this example onClick we clear text field. And if user left text field empty onBlur or did not enter anything and left that text field, we get back original value there.
Example onBlur get back original value
The only problem with this example is when we enter the value we want to send, and if we click again on this field that will clear the value user entered also. This should not happen to data which user entered. Check next example.
Inline JavaScript stop entered value to be cleared onClick
A problem can occure if you enter something in text field above method will clear that also. So we have to put a if condition that if value is not default then it should not be cleared.
<input type="text" value="Search here ..." onclick="if(this.value == 'Search here ...') {this.value = ''}" onBlur="if(this.value == '') {this.value = 'Search here ...'}" />Yeah finally we have got what we wanted. This method will clear default textfield value on click, and if nothing entered onBlur will get back default value. Also this will not remove the user’s entered text or value. Awesome!
Example Stop entered Value to be cleared onClick
That’s all if you have small or simple form then you don’t need to generate the function which is coming below. But if you have large or multiple forms then its recommended to use Form for clearing default text field, textarea values.
Tip: Instead of giving string to compare you can also use this.defaultValue defaultValue is a JavaScript function which returns the value of field which loaded with HTML from server.
Recommended: Clear Input text Field or textarea by calling JavaScript Function
Its always a great idea to keep your HTML neat and clean so code is readable. Using so much inline JavaScript in your html can reduce code readability. So let’s now create a function which is more efficient and more powerful to clear and get back original value if form is left empty. Below is example of function. This example also get back original or default value if field left empty.
First create a html text field with default value then call a function with onClick event to remove the default field if that’s not different from actual field. Also call onBlur same function to get back default value if nothing was entered onBlur.
<input type="text" onClick="return clearMyField(this);" onBlur="return clearMyField(this);" value="My default value ..." />
<br>
<input type="email" onClick="return clearMyField(this);" onBlur="return clearMyField(this);" value="[email protected]" />
<br>
<textarea onClick="return clearMyField(this);" onBlur="return clearMyField(this);">My text area</textarea>In above code you can see we have created 1 input text fields, 1 input email field and 1 textarea all these fields have their default values. We need a function which will clear default values, and if nothing entered onBlur get back default values. Also if entered value is not default then stop removing it.
We are calling function clearMyField and giving it argument this, this is actually an array or set of attributes from current field where click event took place. Same thing is going onBlur. Let’s have a look to JavaScript function below.
<script type="text/javascript">
//Let's create a function which take's value as input field.
function clearMyField(myTextField) {
//Let's Catch Default Value
//We will get Default value just to not clear user's data
var default_value = myTextField.defaultValue;
//Let's clear default value from input field.
//We will catch input field by its ID name.
var current_value = myTextField.value;
//If field is empty put back original data. Works for Blur
if(current_value == "") {
myTextField.value = default_value;
return;
}
//If Field is not empty and Default value is equal to value empty the field
if(current_value == default_value) {
myTextField.value = '';
return false;
}
}
</script>As this function we are calling on both onClick and onBlur. We are passing whole input field with all its attributes and values. First of all we catch the defaultValue and store in a variable default_value. Later we get the current value if user already have typed any value then current and default values cannot be same. Later we check if current value is empty which is onBlur if entered nothing. Then we reset the default value for this input text field or input email, phone or text area. Later in same function we clear text field if that have default value.
Example Clear Input text Field or textarea by calling JavaScript Function
Please share your views and if you have any confusion or question you can also post that in comments section.