[TOC] # 8.1常用键盘事件 事件除了使用鼠标触发,还可以使用键盘触发。 | 键盘事件 | 触发条件 | | --- | --- | | onkeyup      执行循序3**不区分大小写** | 某个键盘按键被**松开时触发** | | onkeydown   执行循序1**不区分大小写** | 某个键盘按键被**按下时触发** | | onkeypress   执行循序2**区分大小写** | 某个键盘按键被按下时触发**但是它不识别功能键 比如ctrl shift箭头等** | ~~~ 传统 1. keyup 按键弹起的时候触发 document.onkeyup = function() { console.log( '我弹起了'); 新兴 （常用 有兼容性问题） document.addEventListener( 'keyup', function() { console.log('我弹起了'); }) ~~~  # 8.2键盘事件对象 （keyCode） | 键盘事件对象属性 | 说明 | | --- | --- | | keyCode | 返回**该**键的ASCII值 |  //键盘事件对象中的keyCode属性可以得到相应键的ASCII码值 // 1.我们的keyup 和keydown事件不区分字母大小写 a和A得到的都是65 // 2.我们的keypress 事件区分字母大小写 a 97和A得到的是65  ## ASCII表  # 案例:模拟京东按键输入内容 ## 当我们按下s键，光标就定位到搜索框 ## 案例分析 （keyup 常用） ①核心思路:检测用户是否按下了s键,如果按下s键,就把光标定位到搜索框里面 ②使用键盘事件对象里面的keyCode 判断用户按下的是否是s键 ③搜索框获得焦点:使用js里面的focus()方法 ## 代码实验 ~~~ <input type="text"> <script> //核心思路:检测用户是否按下了s键，如果按下s键，就把光标定位到搜索框里面 //使用键盘事件对象里面的keyCode判断用户按下的是否是s键 //搜索框获得焦点: 使用js里面的focus() 方法 var search = document.querySelector( ' input ' ); document.addEventListener( ' keyup', function(e) { // console.log(e.keyCode); //先输出，看按下的键sall 表数字是那个，在判断 if (e.keyCode=== 83) { search. focus(); } }) </script> ~~~ # 2案例:模拟京东快递单号查询 （文本框上面自动显示大字号的内容） 要求:当我们在文本框中输入内容时,文本框上面自动显示大字号的内容。  ## 案例分析 （keyup 常用） ①快递单号输入内容时,上面的大号字体盒子( con )显示(这里面的字号更大) ②表单检测用户输入:**给表单添加键盘事件** ③同时**把快递单号里面的值( value )获取过来**赋值**给con盒子( innerText )做为内容** ④**如果快递单号里面内容为空**,则**隐藏大号字体盒子(con)盒子** **④注意: keydown和keypress在文本框里面的特点:他们两个事件触发的时候,文字还 没有落入文本框中。** **⑤keyup事件触发的时候，文字已经落入文本框里面了** **⑥当我们失去焦点，就隐藏这个con盒子 ⑦当我们获得焦点，并且文本框内容不为空，就显示这个con盒子** ## 代码实验 （innerText div内容的值，value表单的内容的值） ~~~ <scr1pt> //快递单号输入内容时， 上面的大号字体盒子(con)显示(这里面的字号更大) //表单检测用户输入:给表单添加键盘事件 //同时把快递单号里面的值(value)获取过来赋值给con盒子(innerText)做为内容 //如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子 var con = document.querySelector(' .con' ); var jd_ input = document.querySelector('.jd' ); jd_ input.addEventListener( ' keyup', function() { // console.log( '输入内容啦'); if (this.value == '') { con.style.display = 'none' ; } else { con.style.display = ' block con.innerText = this.value ; }) //⑥当我们失去焦点，就隐藏这个con盒子 jd_ input.addEventL istener( 'blur', function() { con.style.display = 'none ' ; }) //⑦当我们获得焦点，就隐藏这个con盒子 jd_ input.addEventListener( 'focus', function() { if (this.value !== ' ' ) { con.style.display = ' none ' ; } }) </script> ~~~