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 responsive 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
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.
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.
- jQuery Code: Use the below command to add Jquery CDN to your file.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<!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>GeeksforGeeks</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>
|
<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> |
<script> window.addEventListener('load', () => {
const button = document.querySelector('#clear');
button.addEventListener('click', () => {
document.querySelector('#enter').value = "";
});
});
</script> |
$(document).ready(()=> { alert("nigge")
$('#clear').on('click', () =>{
$('#enter').val("");
})
}); |
Output: Click here to see live code output
HTML and CSS both are foundation of webpages. HTML is used for webpage development by structuring websites, web apps and CSS used for styling websites and webapps. 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 more about HTML, CSS and jQuery from the links given below: