Home > Web Front-end > JS Tutorial > body text

How to register a carriage return event for a button (setting the default button) using javascript_javascript skills

WBOY
Release: 2016-05-16 16:00:01
Original
1326 people have browsed it

The example in this article describes the method of javascript registering the carriage return event for the button (setting the default button). Share it with everyone for your reference. The details are as follows:

First of all, I have to say that I am really a novice when it comes to JS. Regarding JS and some JS frameworks such as JQuery, I am only in the stage of simple application. Of course, I am also constantly learning. I hope to share more experience in JS with you in the future. Let’s start with something appetizing today. Let’s talk about how to set a default button. That is, no matter whether the focus is on the button or not, as long as you press Enter, the click event of the button will be triggered.

The code is very simple. To complete this function, only a few lines of code are needed:

//为keyListener方法注册按键事件
document.onkeydown=keyListener;
function keyListener(e){
 // 当按下回车键,执行我们的代码
 if(e.keyCode == 13){
 //我们要做的事情
 }
}
Copy after login

Well, it seems a bit too simple. I feel a little embarrassed to finish a blog like this. Finally, let me attach an example of a small program for you:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>计算器</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;
    }
   }
   //为keyListener方法注册按键事件
   document.onkeydown=keyListener;
   function keyListener(e){
    // 当按下回车键,执行我们的代码
    if(e.keyCode == 13){
     calculate();
    }
   }
  </script>
 </head>
 <body >
  税前薪资:<input type="text" id="pre-tax"/> 
  <input type="button" id="calculate" value="计算" onclick="calculate()"/>
  利息:<input type="text" id="interest" readonly="readonly"/>
 </body> 
</html>
Copy after login

This small example is very simple and the code is easy to understand, but the things behind the code are not understandable by ordinary people. If you understand, please raise your hand....

I hope this article will be helpful to everyone’s JavaScript programming design.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!