How to Clear Input Field Using on Focus and JavaScript

Learn How to Clear Input Field Using on Focus and JavaScript.

Click on the input filed to clear text.

Clear input Field onFocus()

<!-- When the input field gets focus, replace its current value with an empty string -->
<input type="text" onfocus="this.value=''" value="Clear Text">

Clear input Field Using JavaScript

<button onclick="document.getElementById('myInput').value = ''">Clear input field</button>
<input type="text" value="This is text" id="myInput">

Click on the button to clear the text

Clear input Field Using External JavaScript

Step 1) Add HTML

<button onclick="myFunction()">Clear input field</button>

<input type="text" value="This is text" id="myInput">

Step 2) Add JavaScript

<script>
function myFunction() {

   var a = document.getElementById('myInput');
   a.value = ''
}
</script>

Complete Code

<!DOCTYPE html>
<html>
<body>

<p>Clear the input field when you click on the button:</p>
<button onclick="myFunction()">Clear input field</button>

<input type="text" value="This is text" id="myInput">

<script>
function myFunction() {

   var a = document.getElementById('myInput');
   a.value = ''
}
</script>
</body>
</html>

Try it Yourself! »