JavaScript实现按键快速获取输入框光标

简介: JavaScript实现按键快速获取输入框光标

JavaScript实现按键快速获取输入框光标

案例池子:

JS实现鼠标悬停变色

JavaScript中的排他算法实现按钮单选

JavaScript中的localStorage

JavaScript中的sessionStorage

JavaScript实现网页关灯效果

JavaScript实现一段时间之后关闭广告

JavaScript实现按键快速获取输入框光标

效果展示

概述

简介:通过JavaScript实现,当我按下键盘上面某个键之后,然后锁定输入框的光标。

HTML结构

<body>
    <input type="text">
</body>

JS逻辑

<script>
        // 核心思路: 检测用户是否按下了s 键,如果按下s 键,就把光标定位到搜索框里面
        // 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
        // 搜索框获得焦点: 使用 js 里面的 focus() 方法
        var search = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
            // console.log(e.keyCode);
            if (e.keyCode === 83) { // 83是对应的键盘上的s
                search.focus();
            }
        })
    </script>

完整代码

<!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);
            if (e.keyCode === 83) { // 83是对应的键盘上的s
                search.focus();
            }
        })
    </script>
</body>
</html>
相关文章
|
6月前
|
JavaScript 算法 数据安全/隐私保护
原生JS实现:密码输入框显示隐藏密码效果
原生JS实现:密码输入框显示隐藏密码效果
170 4
|
4月前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
202 0
|
3月前
|
JavaScript 前端开发 API
vue中将验证表单输入框的方法写在一个js文件中(表达式验证邮箱、身份证、号码、两次输入的密码是否一致)
这篇文章介绍了如何在Vue框架中将表单输入验证逻辑封装到一个JavaScript文件中,并通过正则表达式验证邮箱、身份证、手机号等信息,同时确保两次密码输入的一致性。
|
3月前
|
小程序 JavaScript
|
4月前
|
JavaScript
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)
481 2
|
6月前
|
JavaScript 前端开发
JavaScript实现将输入框内容放大的效果
JavaScript实现将输入框内容放大的效果
32 0
|
6月前
|
JavaScript 前端开发
JavaScript实现将输入框中的信息保存到表格中
JavaScript实现将输入框中的信息保存到表格中
28 0
|
6月前
|
JavaScript
JS监听按键,禁止F12,禁止右键,禁止保存网页
JS监听按键,禁止F12,禁止右键,禁止保存网页
|
6月前
|
JavaScript 前端开发
Javascript的form表单校验输入框
Javascript的form表单校验输入框
48 0