Of Stack

javascript means to register a carriage return event for a button (setting the default button)

  • 2020-06-07 04:03:09
  • OfStack

This article illustrates how javascript registers a carriage return event for a button (setting the default button). Share to everybody for everybody reference. The details are as follows:

First of all, I have to say that I am a real rookie at JS. As for JS and some JS frameworks such as JQuery, I am just at the stage of simple application. Of course, I am still learning, and I hope to share more JS experiences with you in the future. I'm going to start with an appetizer. I'm going to talk about how to set a default button. That is, pressing enter triggers a button click regardless of whether the focus is not on the button.

The code is very simple, and to do this, you only need a few lines of code: 


// for keyListener Method to register key events 
document.onkeydown=keyListener;
function keyListener(e){
 //  When the enter key is pressed, execute our code 
 if(e.keyCode == 13){
 // What we're going to do 
 }
}

Well, it seems a little too easy, just finishing a blog post like this, I'm a little embarrassed. Finally, I attach an example of a small program: 


<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title> The calculator </title>
  <script type="text/javascript" >
   function calculate() {
    var a = document.getElementById("pre-tax").value;
    if (parseInt(a)>8000) {
     document.getElementById("interest").value =800+ (a - 8000)*15/100;
    } else {
     document.getElementById("interest").value =a/10;
    }
   }
   // for keyListener Method to register key events 
   document.onkeydown=keyListener;
   function keyListener(e){
    //  When the enter key is pressed, execute our code 
    if(e.keyCode == 13){
     calculate();
    }
   }
  </script>
 </head>
 <body >
   Pre-tax salary: <input type="text" id="pre-tax"/> 
  <input type="button" id="calculate" value=" To calculate " onclick="calculate()"/>
   Interest: <input type="text" id="interest" readonly="readonly"/>
 </body> 
</html>

This small example is very simple, the code is very easy to understand, but behind the code is not a normal person can understand. Raise your hand if you understand...

I hope this article has been helpful for your javascript programming.

Related articles: