In this tutorial we will learn How To Disable Button on Enter KeyPress with JavaScript. For this we can use addEventListener method, keyCode property and JavaScript disabled attribute.
Table of Contents
HTML Code
HTML Code is given below, we have one button tag with id defined using id attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Disable Button by Enter Key</title>
</head>
<body>
<button id="btn">Press Enter to Disable Me</button>
</body>
</html>
JavaScript Code
Take a look at the JavaScript code given below.
<script>
document.addEventListener("keydown", function(){
var x = event.keyCode || event.which;
if(x==13)
{
document.getElementById('btn').disabled=true;
}
})
</script>
In above code, addEventListener() method is used to tie the keydown event listener with the HTML document. On keypress the pressed key is verified using keyCode property or which property.
Once Enter keypress is detected using if statement, button is disabled using disabled attribute by setting it's value to true.
13 is the ASCII code of Enter key which tells us that Enter key is pressed because each pressed key has it's own unique ASCII code.
Video Tutorial
Watch video tutorial on How To Disable Button on Enter KeyPress using JavaScript.