onkeyup 键盘按键弹起时触发,onkeydown键盘按键按下时触发且可以识别功能键,onkeypress键盘按键按下时触发但不可以识别功能键如ctrl shift 箭头等。前两个不可识别字母大小写而最后一个可以。这三个的触发顺序是:keydown,keypress,keyup.
键盘事件对象:系统自动给的
ele.addEventListener('事件',function(e){}),e即是事件对象。常用的有e.keyCode可以得到按键的ASCII值。
案例一:
模仿京东搜索框,按下按键s就可以让搜索框自动聚焦:
可以看到虽然实现了按下s键就聚焦但是s也被输入了,因为这里是给keydown绑定监听事件,所以按下的时候恰好触发也把s给输入进去了。这里改成keyup就不会了,因为按键弹起时才触发,s不会被输入:
案例二:模拟京东查询快递单号:
css部分:
js部分:
效果:
可以发现放大的数字永远比输入的少一个而且当仅输入一个数时上面的框框不会出现。原因是keydown是按下按键立马就触发了,而此时按键中的数还没有落入文本框中,可以理解为触发后就落入,所以第一次检测this.value == '',所以上面的框框没有出现且会永远比下面少一个数。只要改成keyup即可。