Are you looking for a solution to clear an input field in JavaScript? Look no further!
In this article, we will show you how to clear an input field using various methods such as the value property, setAttribute method, and reset method.
Aside from that, we also provide code examples and explanations for each method.
How to clear an input field in JavaScript?
There are several ways how to clear an input field in JavaScript. The following are a few examples:
Using the value property
You can clear an input field in JavaScript by setting the value of the input field to an empty string.
Here’s an example:
document.getElementById("inputField").value = '';
This code selects the input element with the id “inputField” and sets its value to an empty string, effectively clearing the input field.
The value property represents the current value of the input field.
Here’s the complete code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<h2 style="color:blue">Welcome to Itsourcecode</h2>
<h2 style="color:red">How to clear an input field in JavaScript?</h2>
<p>The input field will be cleared, when you clicked button</p>
<div style="display: flex;">
<button onclick="clearInput()">Clear input field</button>
<input type="text" id="inputField" value="Welcome to Itsourcecode!">
</div>
<script>
function clearInput() {
document.getElementById('inputField').value = '';
}
</script>
</body>
</html>
Output:
Using the setAttribute method
document.getElementById('inputField').setAttribute('value', '');This solution uses the setAttribute method to set the value attribute of the input field to an empty string, which clears the input field.
The setAttribute method is used to set the value of an attribute on an element.
Here’s the complete example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<h2 style="color:blue">Welcome to Itsourcecode</h2>
<h2 style="color:red">How to clear an input field in JavaScript?</h2>
<p>The input field will be cleared, when you clicked button</p>
<div style="display: flex;">
<button onclick="clearInput()">Clear input field</button>
<input type="text" id="inputField" value="Welcome to Itsourcecode!">
</div>
<script>
function clearInput() {
document.getElementById('inputField').setAttribute('value', '');
}
</script>
</body>
</html>
Output:
The script in the code you provided uses the setAttribute method to clear the input field only once.
When the “Clear input field” button is clicked for the first time, the clearInput function is called, which sets the value attribute of the input element to an empty string using the setAttribute method. This clears the input field.
However, if you enter a new value into the input field and click the “Clear input field” button again, the input field will not be cleared.
This is because setting the value attribute using the setAttribute method only changes the default value of the input field, not its current value.
To clear the input field multiple times, you can use the value property instead of the setAttribute method.
Using the reset method
document.getElementById('Form').reset();
The reset method is used in the clearInput function to reset the form with id=”Form.”
When the “Clear form” button is clicked, the clearInput function is called, which resets all form controls to their initial values, including clearing the input field.
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<h2 style="color:blue">Welcome to Itsourcecode</h2>
<h2 style="color:red">How to clear an input field in JavaScript?</h2>
<p>The input field will be cleared, when you clicked button</p>
<form id="Form">
Employee ID: <input type="text">
<input type="button" onclick="clearInput()" value="Clear form"><br><br>
</form>
<script>
function clearInput() {
document.getElementById("Form").reset();
}
</script>
</body>
</html>
Output:
Using onfocus event
You can also use the onfocus event to clear an input field in JavaScript.
The onfocus event is triggered when an element receives focus, such as when a user clicks on an input field or navigates to it using the keyboard.
Here’s an example of how you can use the onfocus event to clear an input field:
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<h2 style="color:blue">Welcome to Itsourcecode</h2>
<h2 style="color:red">How to clear an input field in JavaScript?</h2>
<p>The input field will be cleared, when you clicked button</p>
<input type="text" id="inputField" value="Welcome to Itsourcecode!" onfocus="clearInput()"><br><br>
<script>
function clearInput() {
document.getElementById('inputField').value = '';
}
</script>
</body>
</html>
As you can see, the onfocus event is added to the input field using the onfocus attribute.
When the input field receives focus, the clearInput function is called, which sets the value property of the input field to an empty string, clearing the input field.
Output:
Conclusion
In conclusion, we have discussed several effective ways to clear an input field in JavaScript.
These methods include using the value property, setAttribute method, reset method, and onfocus event.
Each of these methods provides a different approach to clearing an input field, and you can choose the one that best fits your needs.
By using these methods, you can easily and effectively clear inputs in your code, improving the user experience and functionality of your web applications.
We are hoping that this article provides you with enough information that helps you understand the clear input field JavaScript.
You can also check out the following article:
Thank you for reading itsourcecoders 😊.