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>
相关文章
|
1月前
|
JavaScript 算法 数据安全/隐私保护
原生JS实现:密码输入框显示隐藏密码效果
原生JS实现:密码输入框显示隐藏密码效果
|
1月前
|
JavaScript 前端开发
JavaScript实现将输入框内容放大的效果
JavaScript实现将输入框内容放大的效果
14 0
|
1月前
|
JavaScript 前端开发
JavaScript实现将输入框中的信息保存到表格中
JavaScript实现将输入框中的信息保存到表格中
16 0
|
1月前
|
JavaScript
JS监听按键,禁止F12,禁止右键,禁止保存网页
JS监听按键,禁止F12,禁止右键,禁止保存网页
|
1月前
|
JavaScript 前端开发
Javascript的form表单校验输入框
Javascript的form表单校验输入框
32 0
|
1月前
|
JavaScript 前端开发
JavaScript 获取 input 输入框内容的几种方法
JavaScript 获取 input 输入框内容的几种方法
96 0
|
1月前
|
前端开发 JavaScript
前端知识(十三)——JavaScript监听按键,禁止F12,禁止右键,禁止保存网页【Ctrl+s】等操作
前端知识(十三)——JavaScript监听按键,禁止F12,禁止右键,禁止保存网页【Ctrl+s】等操作
60 0
|
9月前
|
JavaScript
js鼠标离开-清除input输入框内的空格demo效果示例(整理)
js鼠标离开-清除input输入框内的空格demo效果示例(整理)
|
10月前
|
JavaScript
JS 网易严选输入框的制作
JS 网易严选输入框的制作
68 0