Skip to content
Related Articles

Related Articles

HTML | Clearing the input field
  • Last Updated : 15 Oct, 2019

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:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :