模拟京东按键输入内容

-Camellia007-

已于 2025-03-10 15:59:58 修改

阅读量153

点赞数 3

CC 4.0 BY-SA版权

分类专栏： # javascript 文章标签： html 前端 css javascript css3

于 2025-03-08 16:01:30 首次发布

本文链接：https://blog.csdn.net/2401_87291474/article/details/146117467

javascript 专栏收录该内容

34 篇文章

订阅专栏

题目：模拟京东按键输入内容

作用：当我们按下 s 键，光标就定位到搜索框

分析：

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

效果：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟京东按键输入内容</title>
</head>
<body>
    <input type="text">
    <script>
        var search = document.querySelector('input');
        document.addEventListener('keyup',function(e) {
            if(e.keyCode == 83) {
                search.focus();
            }
        })
    </script>
</body>
</html>