怎么在JS中增加键盘监听

JavaScript015

怎么在JS中增加键盘监听,第1张

键盘的每个键都有对应的事件值,用按键按下或抬起事件,就可以绑定了,事件和对应值如下:

1、keydown()

keydown事件会在键盘按下时触发.

2、keyup()

keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件

3、keypress()

keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键

对应值:

keycode 8 = BackSpace BackSpace

keycode 9 = Tab Tab

keycode12 = Clear

keycode13 = Enter

keycode16 = Shift_L

keycode17 = Control_L

keycode18 = Alt_L

keycode19 = Pause

keycode20 = Caps_Lock

keycode27 = Escape Escape

keycode32 = space space

keycode33 = Prior

keycode34 = Next

keycode35 = End

keycode36 = Home

keycode37 = Left

keycode38 = Up

keycode39 = Right

keycode40 = Down

keycode41 = Select

keycode42 = Print

keycode43 = Execute

keycode45 = Insert

keycode46 = Delete

keycode47 = Help

keycode48 = 0 equal braceright

keycode49 = 1 exclam onesuperior

keycode50 = 2 quotedbl twosuperior

keycode51 = 3 section threesuperior

keycode52 = 4 dollar

keycode53 = 5 percent

keycode54 = 6 ampersand

keycode55 = 7 slash braceleft

keycode56 = 8 parenleft bracketleft

keycode57 = 9 parenright bracketright

keycode65 = a A

keycode66 = b B

keycode67 = c C

keycode68 = d D

keycode69 = e E EuroSign

keycode70 = f F

keycode71 = g G

keycode72 = h H

keycode73 = i I

keycode74 = j J

keycode75 = k K

keycode76 = l L

keycode77 = m M mu

keycode78 = n N

keycode79 = o O

keycode80 = p P

keycode81 = q Q at

keycode82 = r R

keycode83 = s S

keycode84 = t T

keycode85 = u U

keycode86 = v V

keycode87 = w W

keycode88 = x X

keycode89 = y Y

keycode90 = z Z

keycode96 = KP_0 KP_0

keycode97 = KP_1 KP_1

keycode98 = KP_2 KP_2

keycode99 = KP_3 KP_3

keycode 100 = KP_4 KP_4

keycode 101 = KP_5 KP_5

keycode 102 = KP_6 KP_6

keycode 103 = KP_7 KP_7

keycode 104 = KP_8 KP_8

keycode 105 = KP_9 KP_9

keycode 106 = KP_Multiply KP_Multiply

keycode 107 = KP_Add KP_Add

keycode 108 = KP_Separator KP_Separator

keycode 109 = KP_Subtract KP_Subtract

keycode 110 = KP_Decimal KP_Decimal

keycode 111 = KP_Divide KP_Divide

keycode 112 = F1

keycode 113 = F2

keycode 114 = F3

keycode 115 = F4

keycode 116 = F5

keycode 117 = F6

keycode 118 = F7

keycode 119 = F8

keycode 120 = F9

keycode 121 = F10

keycode 122 = F11

keycode 123 = F12

keycode 124 = F13

keycode 125 = F14

keycode 126 = F15

keycode 127 = F16

keycode 128 = F17

keycode 129 = F18

keycode 130 = F19

keycode 131 = F20

keycode 132 = F21

keycode 133 = F22

keycode 134 = F23

keycode 135 = F24

keycode 136 = Num_Lock

keycode 137 = Scroll_Lock

keycode 187 = acute grave

keycode 188 = comma semicolon

keycode 189 = minus underscore

keycode 190 = period colon

keycode 192 = numbersign apostrophe

keycode 210 = plusminus hyphen macron

keycode 211 =

keycode 212 = copyright registered

keycode 213 = guillemotleft guillemotright

keycode 214 = masculine ordfeminine

keycode 215 = ae AE

keycode 216 = cent yen

keycode 217 = questiondown exclamdown

keycode 218 = onequarter onehalf threequarters

keycode 220 = less greater bar

keycode 221 = plus asterisk asciitilde

keycode 227 = multiply division

keycode 228 = acircumflex Acircumflex

keycode 229 = ecircumflex Ecircumflex

keycode 230 = icircumflex Icircumflex

keycode 231 = ocircumflex Ocircumflex

keycode 232 = ucircumflex Ucircumflex

keycode 233 = ntilde Ntilde

keycode 234 = yacute Yacute

keycode 235 = oslash Ooblique

keycode 236 = aring Aring

keycode 237 = ccedilla Ccedilla

keycode 238 = thorn THORN

keycode 239 = eth ETH

keycode 240 = diaeresis cedilla currency

keycode 241 = agrave Agrave atilde Atilde

keycode 242 = egrave Egrave

keycode 243 = igrave Igrave

keycode 244 = ograve Ograve otilde Otilde

keycode 245 = ugrave Ugrave

keycode 246 = adiaeresis Adiaeresis

keycode 247 = ediaeresis Ediaeresis

keycode 248 = idiaeresis Idiaeresis

keycode 249 = odiaeresis Odiaeresis

keycode 250 = udiaeresis Udiaeresis

keycode 251 = ssharp question backslash

keycode 252 = asciicircum degree

keycode 253 = 3 sterling

keycode 254 = Mode_switch

iphoneX 微信页面下 拉起键盘后关闭键盘,原键盘区域还存在

js 没有办法对手机软键盘直接进行监听的

那是否可以对 input 失去焦点进行监听

搜一了一个 MDN Web 文档 ,发现

focus 和 blur 不会冒泡,而 focusin 和 focusout 可以支持冒泡,加事件代理,当触发 focusout 事件后滚一下

测试后发现 ios 可以监听到 focusout 事件,而 android 在键盘收起后,input 仍处于焦点状态,无法触发 focusout 事件

添加 resize 事件后 发现 android 在唤起键盘收起键盘后 window.innerHeight 会有改变,而 ios 不会

js 移动端对键盘监听

原生键盘监听事件:按下一次按键,分为三个过程,按下—按住—松开

onkeydown:某个键被按下

onkeypress:某个键盘的键被按下或按住

onkeyup:某个键盘的键被松开

使用方法,一般来说,键盘监听是直接在整个页面文档上进行监听的,也就是document上

以下是原生的使用案例

//实际使用

document.onkeydown=function(e){ //对整个页面文档监听

var keyNum=window.event ? e.keyCode :e.which //获取被按下的键值

//判断如果用户按下了回车键(keycody=13)

if(keyNum==13){

alert('您按下了回车')

}

//判断如果用户按下了空格键(keycode=32),

if(keyNum==32){

alert('您按下了空格')

}

}

剩下另外两个按键方法同理

jquery的方式监听键盘事件

jquery的也分为三个过程,但是在事件名称上有所不同

keyup:某个键盘的键被松开

keydown:某个键被按下

keypress:某个键盘的键被按下或按住