How to put a responsive clear button inside HTML input text field ? - GeeksforGeeks

03 Aug, 2021
The responsive button inside an input field will clear the text area on the click event. In this article, we will discuss how to put a responsive clear button inside an HTML input field using HTML, CSS, and JavaScript. In order to put the button inside the input field, we shall use CSS. Let us see the HTML first.Creating structure: In this section, we will create the basic structure for the input field. 
HTML Code: By using the HTML, we will place the input field where we will add a resposive button to clear the field. We create a text field and a button and we place them inside the same division. In order to fit the button into input text field, the following css is required. 
html
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta name="viewport"           content="width=device-width, initial-scale=1.0">    <title>Responsive clear field button</title></head>  <body>    <h1>GeeksoforGeeks</h1>    <b>Responsive clear field button</b>    <br><br>    <div class="buttonIn">        <input type="text" id="enter">        <button id="clear">clear</button>    </div></body>  </html>
Designing structure: In this section, we will design the structure to make it attractive or meaningful.  
CSS Code: Set the position attribute of parent division to relative. Set the position of the button as absolute inside the division. The above two actions makes it possible for us to shift the button to the top right position of the div which would move the button inside the input field and place it at the right end. To do this, we set top and right margins to 0px, however this value can be varied depending on the design requirement. We put a Z-Index greater than one to position the button at layer above the input field. 
CSS
<style>    h1 {        color: green;    }          .buttonIn {        width: 300px;        position: relative;    }          input {        margin: 0px;        padding: 0px;        width: 100%;        outline: none;        height: 30px;        border-radius: 5px;    }          button {        position: absolute;        top: 0;        border-radius: 5px;        right: 0px;        z-index: 2;        border: none;        top: 2px;        height: 30px;        cursor: pointer;        color: white;        background-color: #1e90ff;        transform: translateX(2px);    }      </style>
Responsive structure: In this section, we can use any of the below code sections to make it responsive by using vanilla JavaScript or we can also use jQuery for that. In the two below methods, the basic approach is the same. We listen for the click event on the button and once it is triggered we set the value of the input field to a null string. 
JavaScript Code: The javascript code for making the clear button responsive.  
javascript
<script>    window.addEventListener('load', () => {        const button = document.querySelector('#clear');        button.addEventListener('click', () => {            document.querySelector('#enter').value = "";        });    }); </script>
jQuery Code:
JQuery
$(document).ready(()=>        {            alert("nigge")            $('#clear').on('click', () =>            {                $('#enter').val("");            })        });
Final solution: In this section, we will combine all the sections together, but have to use CDN links if you want to achieve the task by using the jQuery section. 
CDN jQuery link:  
<script src=”https://code.jquery.com/jquery-3.4.1.min.js” integrity=”sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=”anonymous”></script>
 
Program:  
html
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta name="viewport"           content="width=device-width, initial-scale=1.0">    <title>Responsive clear field button</title>    <style>        h1 {            color: green;        }        .buttonIn {            width: 300px;            position: relative;        }                  input {            margin: 0px;            padding: 0px;            width: 100%;            outline: none;            height: 30px;            border-radius: 5px;        }                  button {            position: absolute;            top: 0;            border-radius: 5px;            right: 0px;            z-index: 2;            border: none;            top: 2px;            height: 30px;            cursor: pointer;            color: white;            background-color: #1e90ff;            transform: translateX(2px);        }    </style></head>  <body><center>    <h1>GeeksoforGeeks</h1>    <b>Responsive clear field button</b>    <br>    <br>    <div class="buttonIn">        <input type="text" id="enter">        <button id="clear">clear</button>    </div><center>    <script>    window.addEventListener('load', () => {        const button = document.querySelector('#clear');        button.addEventListener('click', () => {            document.querySelector('#enter').value = "";        });    });    </script></body>  </html>
 
Output:
 
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
sweetyty
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
CSS
HTML
JavaScript
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Create a Responsive Navbar using ReactJS
Form validation using jQuery
Making a div vertically scrollable using CSS
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
HTML Cheat Sheet - A Basic Guide to HTML
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)