模拟京东按键输入案例(无论光标在什么位置,按s键即可将光标定位到搜索框)

简介: 模拟京东按键输入案例(无论光标在什么位置,按s键即可将光标定位到搜索框)

屏幕快照 2022-05-07 下午3.34.39.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <script>
        // 核心思路: 检测用户是否按下了s 键,如果按下s 键,就把光标定位到搜索框里面
        // 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
        // 搜索框获得焦点: 使用 js 里面的 focus() 方法
        var search = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
            // console.log(e.keyCode);
      //s键的ASCII码是83
            if (e.keyCode === 83) {
                search.focus();
            }
        })
    </script>
</body>
</html>
相关文章
|
SQL 存储 缓存
MySQL - 一文了解MySQL的基础架构及各个组件的作用
MySQL - 一文了解MySQL的基础架构及各个组件的作用
1117 0
|
负载均衡 数据库连接 Linux
confluence与jira部署详解
confluence与jira部署详解
confluence与jira部署详解
|
7月前
|
安全 数据安全/隐私保护 Windows
如何在Windows 10系统中查看已连接WiFi密码-亲测可用-优雅草卓伊凡
如何在Windows 10系统中查看已连接WiFi密码-亲测可用-优雅草卓伊凡
341 15
如何在Windows 10系统中查看已连接WiFi密码-亲测可用-优雅草卓伊凡
|
JavaScript 前端开发
JS之url进行编码和解码(三种方式)
JS之url进行编码和解码(三种方式)
19808 2
|
5月前
|
人工智能 自然语言处理 IDE
通义灵码你问我答:看看 5 月上线了哪些新功能?
通义灵码5月升级了智能问答(Ask)模式至Agentic模式,支持自主调用工程感知和网络检索工具,使开发者互动更贴合工程场景。新增行间会话(Inline Chat)与行间建议预测(NES)功能,大幅提升代码修改效率。同时发布AI IDE——Lingma IDE,全面集成智能编码能力,开箱即用,无需额外插件。此外,还优化了上下文文件添加体验及其他多项功能,进一步提升开发效率和用户体验。
|
存储 边缘计算 安全
边缘计算的概念和在IoT中的应用
随着物联网(IoT)设备数量的激增,传统的云计算模式面临着数据传输延迟和带宽压力等问题。边缘计算作为一种新的计算模式,通过将计算资源和服务部署到靠近数据源的位置,解决了这些问题。
270 2
|
小程序 JavaScript 前端开发
基于微信小程序的商城购物系统的设计与实现(论文+源码)_kaic
基于微信小程序的商城购物系统的设计与实现(论文+源码)_kaic
|
存储 缓存 并行计算
DP读书:鲲鹏处理器 架构与编程(四)内存顺序模型与内存屏障
DP读书:鲲鹏处理器 架构与编程(四)内存顺序模型与内存屏障
310 1
|
存储 Java 内存技术
USB-C与TYPE-C接口的区别与应用
USB-C与TYPE-C接口的区别与应用
|
JavaScript Java Spring
Spring Boot 接口返回文件流
Spring Boot 接口返回文件流
867 0