JavaScript 按键定位输入框

最新推荐文章于 2023-07-07 14:47:13 发布

火星飞鸟

最新推荐文章于 2023-07-07 14:47:13 发布

阅读量1.2k

点赞数 2

分类专栏： JavaScript 前端基础文章标签： javascript

本文链接：https://blog.csdn.net/Jack_lzx/article/details/109270197

版权

前端基础同时被 2 个专栏收录

111 篇文章 2 订阅

订阅专栏

JavaScript

88 篇文章 1 订阅

订阅专栏

要求：

有一输入框，当用户按下s键，光标自动定位到输入框中。

实现思路：

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

实现效果：

在这里插入图片描述

代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <script>
        var search = document.querySelector('input');
        // 若使用keydown，按下s后，“s”也会添加到输入框
        // 使用keyup则不会，s键松开后才触发
        document.addEventListener('keyup', function(e) {
            // console.log(e.keyCode);
            if (e.keyCode === 83) {
                search.focus();
            }
        });
    </script>

</body>

</html>