[JavaScript] 常用的键盘事件

2023-11-04

常用的键盘事件

事件除了使用鼠标触发,还可以使用键盘触发
我们主要学习以下三个键盘事件:
在这里插入图片描述
这里举一下onkeyup的示例,当我们按键弹起的时候事件触发:

document.addEventListener('keyup', function() {
    console.log('弹起');
 })

在这里插入图片描述
只要我按键弹起一次,控制台就会输出一次。

键盘事件对象

在这里插入图片描述
注意: onkeydown和onkeyup 不区分字母大小写,onkeypress区分字母大小写。在我们实际开发中,我们更多的使用keydown和keyup,它能识别所有的键(包括功能键)keypress不识别功能键,但是keyCode属性能区分大小写,返回不同的ASCIl值

小示例:当我们按下Esc键时,弹出游戏开始对话框(我们可以通过keyCode先求出Esc ASC||码值)

document.addEventListener('keydown',function(e){
            if(e.keyCode==27)
            {
                alert("游戏开始");
            }
            else{
                alert("按Esc键开始游戏");
            }
 })

实现效果:
当我们没有按下Esc时:
在这里插入图片描述
当我们按下Esc时:
在这里插入图片描述

示例练习:模拟京东按键输入内容

请添加图片描述
这是京东的搜索框,当我们没有鼠标没有点击搜索框时,搜索框不会获得焦点,但是当我们按下s键,搜索框便可以自动获得焦点,大家可以去京东试试这个小功能,那我们如何实现它呢?

核心思路:检测用户是否按下了s键,如果按下s 键,就把光标定位到搜索框里面
使用键盘事件对象里面的keyCode判断用户按下的是否是s键
搜索框获得焦点:使用js里面的 focus()方法

var search = document.querySelector('input');
document.addEventListener('keyup', function(e) {
    if (e.keyCode === 83) {
        search.focus();
    }
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

[JavaScript] 常用的键盘事件 的相关文章

随机推荐

  • 如何在 Debian 9 上安装 PostgreSQL

    PostgreSQL 通常简称为 Postgres 是一个开源通用对象关系数据库管理系统 PostgreSQL 拥有许多高级功能 例如在线备份 时间点恢复 嵌套事务 SQL 和 JSON 查询 多版本并发控制 MVCC 异步复制等 在本教程
  • 如何在Linux中创建用户(useradd命令)

    Linux 是一个多用户系统 这意味着多个人可以同时与同一个系统交互 作为系统管理员 您有责任通过创建和管理系统的用户和组来管理系统的用户和组 删除用户并将它们分配给不同的groups 在本文中 我们将讨论如何使用创建新用户帐户userad
  • python采集信息+Python预处理+tableau绘制可视化大屏

    制作完成的效果 注 这个图绘制的右上角违和感较高 所以各位小伙伴绘制时要注意不要使用这种大块的图形 绘制一些可以设置背景色为透明的哪一种 最后一张图的话设计的是1920 1080的大小 太大了 所以录制的时候并没有完全录制上 现在制作可视化
  • WXML:微信小程序版HTML

    完整微信小程序 Java后端 技术贴目录清单页面 必看 WXML WeiXin Markup Language 是框架设计的一套标签语言 结合基础组件 事件系统 可以构建出页面的结构 3 7 1 标签与属性 常用基础标签text view
  • 微前端:一种的前端架构新思路

    在当今的Web开发世界 前端架构正在经历一场革命 随着应用程序的规模和复杂性日益增长 一个新的概念被引入 那就是 微前端 微前端架构为前端开发提供了新的思路和解决方案 使得团队能够更有效地构建大型Web应用 那么 什么是微前端呢 简单来说
  • 什么是SD-WAN?图文详解五大技术点

    目录 什么是SD WAN 为什么需要SD WAN 1 更快 规划最优路线 降低网络延时 2 更稳 绕开拥塞线路 避免抖动丢包 SD WAN 为极速远程而生 庞大机房节点数量决定扎实基建 千万终端实时探测网络质量 智能路线优化 高速数据包转发
  • SQLite 基础

    SQLite 为什么使用SQLite SQLite 命令 SQLite 安装 SQLite 命令 SQLite 语法 SQLite 语句 SQLite 数据类型 SQLite 特殊运算符 SQLite SQL 高级用法 SQLite PRA
  • UPF_iso cell 替换

    目标 使用stdand cell替换isolation cell 在低功耗SOC中 难免会有signal从掉电阈传输到未掉电阈 两个阈的电压相同 这个时候就需要用ISO cell做隔离 但在一些大工艺的cell中 是没有这种cell的 在这
  • ReactNative中js与原生如何交互

    第一部分 在ReactNative中 原生与js交互常用的是原生通过向js发送事件 参考webview源代码 1 定义事件与发送消息方法 public class ReactExpandListViewEvent extends Event
  • flash player_Flash Player的两种开源替代品

    flash player 2017年7月 Adobe敲响了其Flash Media Player的丧钟 宣布它将在2020年终止对曾经无处不在的在线视频播放器的支持 但是 实际上 Flash在过去八年中一直处于下滑状态破坏其声誉的零时差攻击
  • Docker----Docker容器的启动流程

    详细内容见 DevOps技术社区文章 Docker Docker容器的启动流程
  • new Option("文本","值",true,true).后面两个true分别表示默认被选中和有效!

    var url city cityList json post url parentCityCode code function data var jsonObj JSON parse data areaId append
  • 线程优先级设置

    线程测试需要root用户 不然创建不成功 所以要用sudo su命令 Linux内核的三种调度策略 1 SCHED OTHER 分时调度策略 2 SCHED FIFO 实时调度策略 先到先服务 一旦占用cpu则一直运行 一直运行直到有更高优
  • ad导入candence 更改pin引脚长度

    前言 很多时候我们使用的封装 可能是不完整的 引脚长度也不一样 原理图连接的时候就发现连接不上线 明显没对齐grid 1 右键edit pin 更改第一个引脚为short 然后下拉那个小点完成对目标覆盖 2 确认之后 再重新选择为line
  • 力扣刷题-56 - I. 数组中数字出现的次数、位运算的应用

    一个整型数组 nums 里除两个数字之外 其他数字都出现了两次 请写程序找出这两个只出现一次的数字 要求时间复杂度是O n 空间复杂度是O 1 c 位运算 位运算 计算机中是用二进制存储数据 一个字节包含8个位 每个 1 或者 0 就是一位
  • Android下拉刷新

    app开发中下拉刷新是最常接触到的一个功能 也有很多开源的框架 封装的非常棒 前段时间了解了一下ViewDragHelper 遂用它实现了下拉刷新的功能 大概和我之前的ViewDragHelper之拖动加载 类似淘宝 这篇代码类似 只是做了
  • LeetCode算法题 - 数组异或操作(简单)

    题目 func xorOperation n int start int int xor 0 for i 0 i lt n i xor start 2 i return xor
  • Python学习16:函数的作用

    1 函数是组织好的 可重复使用的 用来实现单一 或相关联功能的代码段 2 函数能提高应用的模块性 和代码的重复利用率 你已经知道Python提供了许多内建函数 比如print 但你也可以自己创建函数 这被叫做用户自定义函数 3 函数的作用
  • java有序链表和无序链表合并_用顺序表或链表实现 将两个无序数列合并为一个有序数列 用c语言。。急急急。。谢谢了。。。...

    满意答案 lklmn 2014 03 03 采纳率 51 等级 9 已帮助 115人 include
  • [JavaScript] 常用的键盘事件

    文章目录 常用的键盘事件 键盘事件对象 示例练习 模拟京东按键输入内容 常用的键盘事件 事件除了使用鼠标触发 还可以使用键盘触发 我们主要学习以下三个键盘事件 这里举一下onkeyup的示例 当我们按键弹起的时候事件触发 document