JavaScript网页制作--模拟京东按键输入

最新推荐文章于 2024-04-02 14:52:01 发布

我是Dreamer啊

最新推荐文章于 2024-04-02 14:52:01 发布

阅读量477

点赞数 3

分类专栏：前端开发文章标签： javascript js

BY Dreamer同学

本文链接：https://blog.csdn.net/weixin_42579348/article/details/110288670

版权

前端开发专栏收录该内容

57 篇文章 6 订阅

订阅专栏

JavaScript网页制作–模拟京东按键输入

在看到这个功能的时候我也很惊讶，京东竟然做了这样的一个功能。在京东商城网页版，无论你在什么位置，只需要按下S键，就可以将光标定位到搜索栏进行搜索。虽然说这是一个很不错的功能，但是貌似没有几个人知道。

程序实现很简单，在s键上升的时候搜索框获得焦点就可以了。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按下S键光标定位搜索框</title>
</head>
<body>
    <input type="text">
    <script>
        var search = document.querySelector('input');
        document.addEventListener('keyup',function(e){
            //可以使用console.log(e.keyCode)打印一下S键的ASCII值
            if(e.keyCode === 83){
                search.focus();
            }
        })
        //在这里使用keyup而不使用keydown，
        //keydown在键盘按下时触发，焦点放到搜索框，然后会触发S键，使S进入搜索框。
        //而使用keyup，是在键盘返回时进行得到焦点，因此搜索框中不会出现s.
    </script>
</body>
</html>

我是Dreamer啊

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
JavaScript网页制作--模拟京东按键输入

JavaScript网页制作–模拟京东按键输入在看到这个功能的时候我也很惊讶，京东竟然做了这样的一个功能。在京东商城网页版，无论你在什么位置，只需要按下S键，就可以将光标定位到搜索栏进行搜索。虽然说这是一个很不错的功能，但是貌似没有几个人知道。程序实现很简单，在s键上升的时候搜索框获得焦点就可以了。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <m
复制链接

扫一扫

专栏目录