常用键盘事件

Try Tomato

已于 2022-04-15 21:41:42 修改

阅读量356

点赞数 1

分类专栏： # + 浏览器 DOM 文章标签： javascript DOM document文档前端键盘事件

于 2022-04-15 21:37:31 首次发布

本文链接：https://blog.csdn.net/weixin_63836026/article/details/124204056

版权

+ 浏览器 DOM 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

案例——键盘输入弹出显示框

了解更多：

onkeyup：某一个按键被松开时触发

onkeydown：某一个按键被按下时触发

onkeypress：某一个按键被按下时触发（不识别功能键）

键盘事件中有一个比较重要的事件对象：keyCode

使用

e.keyCode

可以得到对应的ASCII码值

tips：keyCode是不区分大小写的--A--a得到的ASCII码值都为65

而keypress是区分大小写的--A得到的是65--a得到的是97

<body>
   <a href="javascript:;">你好</a>
</body>
<script>
  const a = document.querySelector('a')
  //我们需要手动获取a链接的焦点，然后按下键盘
  a.addEventListener('keypress',(e)=> {
      if(e.keyCode == 65){a.style.fontSize = '50px'}
  })
</script>

案例——键盘输入弹出显示框

代码还有待优化，目前只是应用实现一个demo

<!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>
         *{
            margin: 0;
            padding: 0;
        }
        input{
            width: 50vw;
            position:absolute;
            top: 10%;
            left: 50%;
            transform: translate(-50%);
            border: 2px solid #000;
            outline: none;
            border-radius: 5px;
        }
        div{
            position: relative;
            width: 50vw;
            left: 25%;
            height: 5vh;
            background-color: #000;
            color: #fff;
            border-radius: 10px;
            display: none;
            font-size: 20px;
            font-weight: bold;
            padding-left: 5vh;
        }
        .one{
            display: block;
            width: 0;
            height: 0;
            border-top: 10px solid #000;
            border-left: 10px solid #000;
            border-right: 10px solid transparent;
            border-bottom: 10px solid transparent;
            transform: rotate(-135deg);
            position: absolute;
            top: 3vh;
            left: 2vh;
            border-radius: 2px;
        }
    </style>
</head>
<body>
    <input type="text">
    <div>
        <i class="one"></i>
    </div>
</body>
<script>
    const input = document.querySelector('input')
    //在文档对象中，按下83ASCII码键，输入框获得焦点
    document.addEventListener('keyup',function(e){
        // console.log(e.keyCode)
        if(e.keyCode === 83){
            input.focus()
        }
    })

    //当键盘输入时，输入框有值做出相应操作
    var div = document.querySelector('div');
    input.addEventListener('keyup',function(e){
        if(this.value !== ''){
            div.style.display = 'block';
            div.innerHTML = this.value;
        }else{
            div.style.display = 'none';
        }
    })
    
    //输入框失去焦点，上方的弹出显示也消失
    input.addEventListener('blur',function(e){
        div.style.display = 'none';
    })
    //获取焦点后判断是否有值，再次执行相应操作
    input.addEventListener('focus',function(e){
        if(this.value == ''){
            div.style.display = 'none';
        }else{
            div.style.display = 'block';
        }
    })
</script>
</html>

Try Tomato

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
常用键盘事件

目录案例——键盘输入弹出显示框了解更多：onkeyup：某一个按键被松开时触发onkeydown：某一个按键被按下时触发onkeypress：某一个按键被按下时触发（不识别功能键）键盘事件中有一个比较重要的事件对象：keyCode使用e.keyCode可以得到对应的ASCII码值tips：keyCode是不区分大小写的--A--a得到的ASCII码值都为65而keypress是区分大小写的--A得到的是65--a得到的是97<body&g...
复制链接

扫一扫