HTML | Clearing the input field
To clear the entire input field without having to delete the whole thing manually Or what if there is already a pre-suggested input present in the input field, that the user doesn’t want. There could be many scenarios. Therefore, in this article, we are going to learn about how to clear the input field.
There are two ways to do this and both are super easy and short. Let us check out both of them.
Method 1: Clearing Input on Focus.
Syntax:
<input onfocus=this.value=''>
Approach:
- Create an input field.
- Set the onfocus attribute to NULL using this.value
Example:
<!DOCTYPE html><html> <body> <body style="text-align:center"> <h2 style="color:green">GeeksForGeeks</h2> <h2 style="color:purple">Clearing Input Field</h2> <p>The below input field will be cleared, as soon as it gets the focus</p> <input type="text" onfocus="this.value=''" value="Click here to clear"> </body> </html> |
Output:
Before:
After:
Method 2: Clearing Input with the help of button.
Syntax:
<button onclick="document.getElementById('InputID').value = ''>Approach:
- Create a button.
- Get the id of input field.
- Set the value NULL of input field using document.getElementById(‘myInput’).value = ”
<!DOCTYPE html><html> <body style="text-align:center"> <h2 style="color:green"> GeeksForGeeks </h2> <h2 style="color:purple"> Clearing Input Field </h2> <p>The below input field will be cleared, as soon as the button gets clicked </p> <button onclick= "document.getElementById( 'myInput').value = ''"> Click here to clear </button> <input type="text" value="GeeksForGeeks" id="myInput"></body> </html> |
Output:
Before:
After:
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
Please Login to comment...