In this blog post, we'll explore how to clear the value of an input field using JavaScript by clicking a button.
It's straightforward to remove or clear the input field's value using the following JavaScript code input_field.value = "".
- input_field represents a reference to the input field you want to clear.
- .value is a property that stores the current value of the input field.
- = "" assigns an empty string to the value property, effectively clearing the field's content.
Let's clear the input field on click of button.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clear Input Field Value | maketechstuff.com</title>
</head>
<body>
<div class="box">
<input type="text" class="input_field">
<button type="button" class="button">clear</button>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
padding: 15px;
text-align: center;
}
input {
width: 100%;
font-size: 30px;
}
button {
font-size: 20px;
padding: 6px 30px;
margin: 10px 0px;
cursor: pointer;
}
JavaScript
let input_field = document.querySelector(".input_field");
let button = document.querySelector(".button");
button.addEventListener("click", clear_input_field);
function clear_input_field() {
input_field.value = "";
// To set focus automatically after clearing input field.
input_field.focus();
}
Output:
Keep in mind that you'll typically execute this code within an event listener attached to a button click. This ensures that the field is cleared only when the button is pressed.
And that's how you can effectively reset the value of an input field with a simple button click! To enhance interactivity, you have the flexibility to incorporate additional event listeners beyond clicks. These include focus, blur, double clicks (dblclick), and more, depending upon your specific requirements. If you have any question or suggestion, feel free to write in the comment section.
Thank you for your time and attention!
You may like:
- How to make input field to convert any text case to uppercase or lowercase instantly on input.
- How to disable input field with JavaScript.
- How to get the value of input field on click using JavaScript.
- How to enable or disable button based on input field value using HTML CSS and JavaScript.
- How to make input field value same as another input field on click using JavaScript.
- Create input field that accept onlu numeriv values using JavaScript.
Share your thoughts.