Pink老师JavaScript课堂案例 - 按下键盘某键输入框获得焦点

最新推荐文章于 2024-07-11 17:46:34 发布

原创

最新推荐文章于 2024-07-11 17:46:34 发布 · 629 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #前端

该博客介绍了如何通过监听keyup事件，利用keyCode获取ASCII码来判断按键，并在特定按键按下后使输入框自动获得焦点。

核心思路

当按键按下抬起时（keyup），运行keyCode返回ASCII码，判断ASCII码是不是对应按键的ASCII码，如果是则执行.focus()方法，让输入框获得焦点。

   document.addEventListener('keyup', function (e) {  //按下按键后返回对应按键的ASCII码
            // console.log(e.keyCode);
            if (e.keyCode == 83) {    //83是“S”的ascii码 判断是否按下“S”
                //focus()方法 获得焦点
                input.focus();
                input.value = '';  //框内的提示文字清除
            }
        })

全部代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 输入框的外观 */
        .box input {
            /* 点击之后外框的颜色用outline-color */
            outline-color: pink;
            width: 150px;
            height: 25px;
            co