Resetting user input inside the input field when the user clicks outside the element

There are several post and articles about resetting the field but it’s in jQuery, I need one that uses javascript only as I’m still learning Javascript. Also I’ll be putting the js code externally, I dont plan on using inline js.

Here is the example of a user input, I’m looking for a solution that automatically clears the text when the user clicks outside the element.

enter image description here

HTML:

<div class="search-bar-ctn">
     <i class="fas fa-search"></i>
     <form action="">
       <input type="text" class="search-bar" placeholder="Search">
     </form>
</div>

82 thoughts on “Resetting user input inside the input field when the user clicks outside the element”

Leave a Comment