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

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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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 postion 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script>
        window.addEventListener('load', () => {
            const button = document.querySelector('#clear');
            button.addEventListener('click', () => {
                document.querySelector('#enter').value = "";
            });
        }); 
    </script>

    chevron_right

    
    

  • jQuery Code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    $(document).ready(()=>
            {
                alert("nigge")
                $('#clear').on('click', () =>
                {
                    $('#enter').val("");
                })
            });

    chevron_right

    
    

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Output:
  • full-stack-img




    My Personal Notes arrow_drop_up

    Recommended Posts:


    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.