1.keydown keypress keyup
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 三者执行的顺序是 1. keydown 2. keypress 3. keyop document.addEventListener('keyup' , function() { console.log('我松开键盘了'); }) document.addEventListener('keydown' , function () { console.log('我按下键盘了 down'); }) document.addEventListener('keypress' ,function () { console.log('我按下键盘了 press'); }) </script> </body> </html>
2.判断用户按下了哪一个键盘
keyup 和keydown 是不可以区分大小写的 ，keypress是可以识别出大小写的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> document.addEventListener( 'keyup' ,function(e) { console.log(e.keyCode); }) document.addEventListener('keypress' , function(e) { console.log(e.keyCode); }) </script> </body> </html>
3.模拟京东按键输入内容案例
意思就是不管在京东页面的哪一个位置，只要是在键盘上按下 ‘s’ ,搜索框就会自动聚焦，用户就可以进行输入操作，注意的是这里不可以使用keydown ,因为这样子的话 ‘ s’ 就会录入到搜索框当中去，这里改用的是 keyup 。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text"> <script> var search = document.querySelector('input') ; document.addEventListener('keyup' ,function(e) { if(e.keyCode === 83 ) { search.focus() ; } }) </script> </body> </html>
4.模拟京东单号查询案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } .search { position: relative; width: 178px; margin: 100px; } .con { display: none; position: absolute; top: -40px; width: 171px; border: 1px solid rgba(0, 0, 0, .2); box-shadow: 0 2px 4px rgba(0, 0, 0, .2); padding: 5px 0; font-size: 18px; line-height: 20px; color: #333; } .con::before { content: ''; width: 0; height: 0; position: absolute; top: 28px; left: 18px; border: 8px solid #000; border-style: solid dashed dashed; border-color: #fff transparent transparent; } </style> </head> <body> <div class="search"> <div class="con">123</div> <input type="text" placeholder="请输入您的快递单号" class="jd"> </div> <script> // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大） // 表单检测用户输入： 给表单添加键盘事件 // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容 // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子 var con = document.querySelector('.con') ; var jd_input = document.querySelector('.jd') ; jd_input.addEventListener('keyup' ,function(e) { // console.log('输入内容了'); if (this.value == '' ) { con.style.display = 'none' ; } else { con.style.display = 'block' ; con.innerHTML = this.value ; } }) // 失去焦点 jd_input.addEventListener('blur' ,function () { con.style.display = 'none' ; }) // 获得焦点 jd_input.addEventListener('focus' ,function () { if (this.value != '') { con.style.display = 'block' ; } }) </script> </body>
