JavaScript-筑基（十八）键盘事件

onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发，但是它不识别功能键盘，比如ctrl、shift、箭头等

  document.onkeyup = function(){ //使用console.log(11);}document.addEventListener('keyup',function(){console.log(22);})

三个事件有执行顺序，keydown--keypress--keyup。

键盘事件对象

键盘事件对象中的keyCode属性可以得到相应键的ASCII码值，以此来判断用户按下了哪个键。（现在已经使用 e.key=='a' 来判断是否按下a）

keyup 和keydown事件不区分字母大小写 a 和 A 得到的都是65； keypress 事件区分字母大小写 a返回97 和 A返回的是65；

 document.addEventListener('keydown',function(e){if(e.keyCode == 65){alert('你按下了a键');}})

案例：模拟京东按键输入内容，当按下s键，光标就自动定位到搜索框

搜索框获得焦点：使用 js 里面的 focus() 方法

 <input type="text"><script>var search = document.querySelector('input');document.addEventListener('keyup',function(e){ //如果使用keydown会导致按下时聚焦并同时输入了sif(e.keyCode == 83){search.focus();}})</script>

案例：模拟京东快递单号查询，当在文本框输入内容时，文本框上面自动显示大字号内容。

输入内容时，上面大字号字体盒子（con）显示（这里的字体更大）
表单检测用户输入：给表单添加键盘事件
同时把快递单号里面的值（value）获取过来赋值给con盒子（innerText）做为内容
当失去焦点就隐藏这个盒子，获得焦点就显示这个con盒子

<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>

 <div class="search"><div class="con">123</div><input type="text" placeholder="请输入您的快递单号" class="jd"></div><script>var con = document.querySelector('.con');var jd_input = document.querySelector('.jd');jd_input.addEventListener('keyup',function(){ //keydown和keypress在文本框里面的特点：触发时，文字还未落入文本框，就会导致事件先执行而文字后落入if(this.value == ''){//keyup事件发生时，文字已经落入文本框了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>

DOM学习暂告一段落了

JavaScript-筑基（十八）键盘事件相关推荐

JavaScript学习（二十八）—事件冒泡和事件捕获
JavaScript学习(二十八)-事件冒泡和事件捕获一.什么是事件流? 简单说,事件流就是指事件的执行顺序,他包含两种模式:事件冒泡.事件捕获. (一).事件冒泡最常用的一种模式,就是指事件的执 ...
js--鼠标点击移动松开事件、滚轮事件、键盘事件
目录 1.推拽 2.滚轮事件 3.键盘事件 1.推拽 <!DOCTYPE html> <html><head><meta charset="UTF- ...
JavaScript学习（十八）--鼠标事件（鼠标点击松开移动效果）
目录鼠标的单击事件鼠标的松开或按下事件鼠标的移入/移出事件鼠标移动事件鼠标单击事件和鼠标双击事件鼠标拖拽事件鼠标和键盘事件是在页面操作中使用最频繁的操作,可以利用鼠标事件在页面中实现鼠标 ...
JavaScript学习第十六天（键盘事件、表单事件、拖拽事件、框架事件、媒体事件）
文章目录键盘事件表单事件剪贴板事件拖拽事件打印事件框架事件媒体事件总结键盘事件 onkeydown 键盘按下事件,当有按键按下时触发 onkeyup 键盘松开事件,当有按键被松开时触 ...
JavaScript 编程精解中文第三版十八、HTTP 和表单
十八.HTTP 和表单原文:HTTP and Forms 译者:飞龙协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译部分参考了<JavaScript 编程精解(第 2 版)> ...
JavaScript学习（二十六）—事件处理程序的添加与删除
JavaScript学习(二十六)-事件处理程序的添加与删除一.什么是事件? 所谓事件就是指用户或页面自身的某些行为,如点击鼠标,敲击键盘都是属于事件. 二.事件处理程序当事件被触发时会引起某些程 ...
【JavaScript 逆向】猿人学 web 第十八题：jsvmp，洞察先机
案例目标网址:第十八题 jsvmp 洞察先机 - 猿人学本题目标:抓取 5 页数字,计算加和并提交结果常规 JavaScript 逆向思路一般情况下,JavaScript 逆向分为三步: 寻找 ...
JavaScript绑定键盘事件的多种写法
使用JavaScript来绑定键盘事件时,有多种写法,而他们的实现效果实际上是等价的,下面一一来列举. 方式一: function keyboard() {document.onkeydown = f ...
JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...

JavaScript-筑基（十八）键盘事件

键盘事件对象

JavaScript-筑基（十八）键盘事件相关推荐

最新文章

热门文章