1. Introduction

在程序猿的工作中，經常會遇見一些表單數據的提交，對于有表單的東西而言，input輸入框是非常常見的，所以對于一些input的基本事件，我們需要去掌握。

很多時候input框我們輸入結束后都習慣直接按回車，而不是點擊button。在form表單中可以實現點擊回車即可提交表單，但如果只是一個單獨的input框，則無法通過直接按回車來提交內容。

2. Method

這種情況我們可以使用JavaScript腳本實現input框回車事件，其實現方法很簡單，這里用到了jQuery框架，代碼如下：只需要在script標簽中直接加入以下內容即可。

$(document).ready(function () {$("input").keydown(function (event) {if (event.keyCode == 13) {//這里寫事件，例如寫個 a();}}); });

這里給出一個input框示例：

<input type="text" autocomplete="off" placeholder="請輸入英文單詞"></input>

keycode==13即代表按下了回車鍵，同理可以通過更改此代碼實現其他按鍵的觸發事件。

3. Appendix

下面是每個keycode的對應：

2?keyCode?8?=?BackSpace?BackSpace

3?keyCode?9?=?Tab?Tab

4?keyCode?12?=?Clear

5?keyCode?13?=?Enter

6?keyCode?16?=?Shift_L

7?keyCode?17?=?Control_L

8?keyCode?18?=?Alt_L

9?keyCode?19?=?Pause

10?keyCode?20?=?Caps_Lock

11?keyCode?27?=?Escape?Escape

12?keyCode?32?=?space

13?keyCode?33?=?Prior

14?keyCode?34?=?Next

15?keyCode?35?=?End

16?keyCode?36?=?Home

17?keyCode?37?=?Left

18?keyCode?38?=?Up

19?keyCode?39?=?Right

20?keyCode?40?=?Down

21?keyCode?41?=?Select

22?keyCode?42?=?Print

23?keyCode?43?=?Execute

24?keyCode?45?=?Insert

25?keyCode?46?=?Delete

26?keyCode?47?=?Help

27?keyCode?48?=?0?equal?braceright

28?keyCode?49?=?1?exclam?onesuperior

29?keyCode?50?=?2?quotedbl?twosuperior

30?keyCode?51?=?3?section?threesuperior

31?keyCode?52?=?4?dollar

32?keyCode?53?=?5?percent

33?keyCode?54?=?6?ampersand

34?keyCode?55?=?7?slash?braceleft

35?keyCode?56?=?8?parenleft?bracketleft

36?keyCode?57?=?9?parenright?bracketright

37?keyCode?65?=?a?A

38?keyCode?66?=?b?B

39?keyCode?67?=?c?C

40?keyCode?68?=?d?D

41?keyCode?69?=?e?E?EuroSign

42?keyCode?70?=?f?F

43?keyCode?71?=?g?G

44?keyCode?72?=?h?H

45?keyCode?73?=?i?I

46?keyCode?74?=?j?J

47?keyCode?75?=?k?K

48?keyCode?76?=?l?L

49?keyCode?77?=?m?M?mu

50?keyCode?78?=?n?N

51?keyCode?79?=?o?O

52?keyCode?80?=?p?P

53?keyCode?81?=?q?Q?at

54?keyCode?82?=?r?R

55?keyCode?83?=?s?S

56?keyCode?84?=?t?T

57?keyCode?85?=?u?U

58?keyCode?86?=?v?V

59?keyCode?87?=?w?W

60?keyCode?88?=?x?X

61?keyCode?89?=?y?Y

62?keyCode?90?=?z?Z

63?keyCode?96?=?KP_0?KP_0

64?keyCode?97?=?KP_1?KP_1

65?keyCode?98?=?KP_2?KP_2

66?keyCode?99?=?KP_3?KP_3

67?keyCode?100?=?KP_4?KP_4

68?keyCode?101?=?KP_5?KP_5

69?keyCode?102?=?KP_6?KP_6

70?keyCode?103?=?KP_7?KP_7

71?keyCode?104?=?KP_8?KP_8

72?keyCode?105?=?KP_9?KP_9

73?keyCode?106?=?KP_Multiply?KP_Multiply

74?keyCode?107?=?KP_Add?KP_Add

75?keyCode?108?=?KP_Separator?KP_Separator

76?keyCode?109?=?KP_Subtract?KP_Subtract

77?keyCode?110?=?KP_Decimal?KP_Decimal

78?keyCode?111?=?KP_Divide?KP_Divide

79?keyCode?112?=?F1

80?keyCode?113?=?F2

81?keyCode?114?=?F3

82?keyCode?115?=?F4

83?keyCode?116?=?F5

84?keyCode?117?=?F6

85?keyCode?118?=?F7

86?keyCode?119?=?F8

87?keyCode?120?=?F9

88?keyCode?121?=?F10

89?keyCode?122?=?F11

90?keyCode?123?=?F12

91?keyCode?124?=?F13

92?keyCode?125?=?F14

93?keyCode?126?=?F15

94?keyCode?127?=?F16

95?keyCode?128?=?F17

96?keyCode?129?=?F18

97?keyCode?130?=?F19

98?keyCode?131?=?F20

99?keyCode?132?=?F21

100?keyCode?133?=?F22

101?keyCode?134?=?F23

102?keyCode?135?=?F24

103?keyCode?136?=?Num_Lock

104?keyCode?137?=?Scroll_Lock

105?keyCode?187?=?acute?grave

總結

以上是生活随笔為你收集整理的HTML+JS 实现 input 框回车事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。