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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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 = ”
filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
Before:

After:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : shubham_singh



Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.