Javascript registers the carriage return event for the button (sets the default button)

Source: Internet
Author: User

Javascript registers the carriage return event for the button (sets the default button)

This article mainly introduces how to register the carriage return event (set the default button) by using javascript. It is very simple and practical to trigger the button by pressing the Enter key. For more information, see

First of all, I have to say that I am really a rookie in JS. JS and some JS frameworks, such as JQuery, are only in the simple application stage, and of course they are constantly learning, I hope to share with you more about JS in the future. Today, let's start with appetizing and talk about how to set a default button, that is, whether the focus is not on the button, as long as you press enter, it is equivalent to triggering the button click event.

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

?

1

2

3

4

5

6

7

8

// Register a key event for the keyListener Method

Document. onkeydown = keyListener;

Function keyListener (e ){

// When the Enter key is pressed, execute our code

If (e. keyCode = 13 ){

// What we want to do

}

}

Well, it seems a little too simple. I am a little embarrassed to complete a blog in this way. Finally, we will attach an example of a small program:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<! DOCTYPE html>

<Html>

<Head>

<Meta charset = "UTF-8">

<Title> calculator </title>

<Script type = "text/javascript">

Function calculate (){

Var a = document. getElementById ("pre-tax"). value;

If (parseInt (a) & gt; 8000 ){

Document. getElementById ("interest"). value = 800 + (a-8000) * 15/100;

} Else {

Document. getElementById ("interest"). value = a/10;

}

}

// Register a key event for the keyListener Method

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 = "calculate" onclick = "calculate ()"/>

Interest: <input type = "text" id = "interest" readonly = "readonly"/>

</Body>

</Html>

This small instance is very simple, and the code is very understandable, but the things behind the Code are not what the average person can understand. Raise your hand .....

I hope this article will help you design javascript programs.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.