常用键盘事件
时间:2022-07-26
本文章向大家介绍常用键盘事件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1. 键盘事件
<script>
// 常用的键盘事件
//1. keyup 按键弹起的时候触发
document.addEventListener('keyup', function() {
console.log('我弹起了');
})
//3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keypress', function() {
console.log('我按下了press');
})
//2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keydown', function() {
console.log('我按下了down');
})
// 4. 三个事件的执行顺序 keydown -- keypress -- keyup
</script>
2、 键盘事件对象
注意: 1) onkeydown 和 onkeyup 不区分字母大小写(得到的是大写字母的ASCII码),onkeypress 区分字母大小写。 2)在我们实际开发中,我们更多的使用keydown和keyup,它能识别所有的键 (包括功能键) 3) keypress 不识别功能键,但是 keypress 的 keyCode属性能区分大小写,返回不同的ASCII值
使用keyCode属性判断用户按下哪个键
<script>
// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
document.addEventListener('keyup', function(e) {
console.log('up:' + e.keyCode);
// 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
if (e.keyCode === 65) {
alert('您按下的a键');
} else {
alert('您没有按下a键')
}
})
document.addEventListener('keypress', function(e) {
// console.log(e);
console.log('press:' + e.keyCode);
})
</script>
3、 案例:模拟京东按键输入内容
当我们按下 s 键, 光标就定位到搜索框(文本框获得焦点)。
注意:触发获得焦点事件,可以使用 元素对象.focus()
<input type="text">
<script>
// 获取输入框
var search = document.querySelector('input');
// 给document注册keyup事件
document.addEventListener('keyup', function(e) {
// 判断keyCode的值
if (e.keyCode === 83) {
// 触发输入框的获得焦点事件
search.focus();
}
})
</script>
4、 案例:模拟京东快递单号查询
要求:当我们在文本框中输入内容时,文本框上面自动显示大字号的内容。
<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');
// 给输入框注册keyup事件
jd_input.addEventListener('keyup', function() {
// 判断输入框内容是否为空
if (this.value == '') {
// 为空,隐藏放大提示盒子
con.style.display = 'none';
} else {
// 不为空,显示放大提示盒子,设置盒子的内容
con.style.display = 'block';
con.innerText = this.value;
}
})
// 给输入框注册失去焦点事件,隐藏放大提示盒子
jd_input.addEventListener('blur', function() {
con.style.display = 'none';
})
// 给输入框注册获得焦点事件
jd_input.addEventListener('focus', function() {
// 判断输入框内容是否为空
if (this.value !== '') {
// 不为空则显示提示盒子
con.style.display = 'block';
}
})
</script>
- 一些移动 Web 前端开发上的要点记录
- Angularjs基础(十一)
- Silverlight 2 的基础XAML语法学习
- TextView显示html文件中的图片
- 继百度、阿里之后,农业也刮起人工智能风,看它们都干了些啥?
- Windows Server 2008 与 .NET Framework 的版本之间有什么关系
- asp.net mvc相关开源项目推荐
- Android监听来电和去电
- PostCSS 插件postcss-lazyimagecss:自动填写width / height 属性
- Angularjs基础(十)
- Mac 中JetBrain 系列IDE 的配置文件同步(通过Dropbox)
- 面向服务架构(SOA)和企业服务总线(ESB)
- UPS宣布加入货运区块链联盟 价值万亿的物流行业未来将无纸化?
- Android中动态更新ListView
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux 查看历史命令并执行的方法
- 在 awk 中使用循环
- 移植busybox构建最小根文件系统的步骤详解
- Linux中的screen命令使用详解
- Mysql4种方式避免重复插入数据!
- 手撕RTSP协议系列(3)——sdp格式详解
- Linux tee命令使用详解
- 简单了解Linux性能监控命令free
- 在CentOS 8上安装htop的教程
- Ubuntu16.04.5LTS安装SVN的过程
- CentOS6.5与CentOS7 ssh修改默认端口号的方法
- CentOS8 配置本地yum源的详细教程
- linux查找大文件指定内容的实现方法
- linux服务器上安装jdk的两种方法(yum+下载包)
- ubuntu中编写shell脚本开机自动启动(推荐)