Skip to content
Related Articles

Related Articles

How to put a responsive clear button inside HTML input text field ?
  • Last Updated : 15 Apr, 2020

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.




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




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




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




    $(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:




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

    full-stack-img

    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :