JS 43 常用的键盘事件

最新推荐文章于 2022-06-13 12:52:40 发布

肝JOJO

最新推荐文章于 2022-06-13 12:52:40 发布

阅读量178

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_34620296/article/details/102527182

版权

JavaScript 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

1.常用的键盘事件

onkeyup 某个按键被松开时触发,不区分大小写 (最后执行)
onkeydown 某个按键被按下时触发,不区分大小写 (先执行)
onkeypress 某个按键被按下时触发,但是他不识别功能键 ctrl shift 箭头等 (后执行)
例如:

document.addEventListener('keyup',function(){
    alert('松开触发');
})

2.判断用户按了哪个键

keyCode 返回该建的ASCII值
例如:

document.addEventListener('keyup',function(e){
    if(e.keyCode===65){
        alert('按下a键');
    }else{
        alert('不是a');
    }
});

3.小练习,按下s键使光标跳转到搜索框

核心思路:检测用户是否按下了s键,如果按下,就把光标定位到搜索框
代码

<body>
    <input type="text">    
    <script>
       var input=document.querySelector('input');
       document.addEventListener('keyup',function(e){  //使用keyup防止把s输入进搜索框
           //console.log(e.keyCode);  //得知s的ASCII码是83
           if(e.keyCode===83){
               input.focus(); //搜索框获得焦点
           }          
       });
    </script>
</body>

4.仿京东快递搜索栏

在这里插入图片描述
要求:当我们在文本框中输入内容时,文本框上面自动显示大字号的内容,失去焦点时隐藏大盒子,获得焦点时,显示
思路:
1.在输入内容时,上面的大号字体盒子(con)显示出来
2.表单检测用户是否输入
3.把表单中的value获取过来赋值给大盒子(innerHTML)作为内容
4.表单为空时,隐藏大盒子(con)
5.失去焦点时隐藏大盒子,获得焦点时,显示大盒子(con)
注意:keydown和keypress在文本框中的特点:他们两个触发事件的时候,文字还没有落入文本框中,所以不能使用;
keyup触发事件的时候,文字已经落入文本框内了,所以使用

代码如下:

<style>    
        .jd{
            position: absolute;
            top: 39px;
        }
        .con{
            display: none;
            position: absolute;
            top: 0px;          
            width: 171px;
            border: 1px solid rgba(0, 0,0, .2);
            box-shadow: 0 2px 4px rgba(0, 0,0, .2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
        }
        .con::before{
            /* 伪类元素,可以把需要插入的内容插入到元素的其他内容之前,默认内联显示 */
            content: '';
            width: 0;
            height:0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;

        }
    </style>
</head>
<body>
    <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    
    <script>
        var con=document.querySelector('.con');
        var jd=document.querySelector('.jd');
        jd.addEventListener('keyup',function(){
            if(this.value==''){
                con.style.display='none';  //如果搜索框为空,隐藏大框
            }else{
                con.style.display='block';  //不为空显示大框
                con.innerHTML=this.value;  //把搜索框的value赋值给大框
            }

        });
        jd.addEventListener('blur',function(){  //失去焦点时隐藏大盒子
            con.style.display='none';
        });
        jd.addEventListener('focus',function(){ //获得焦点时
            if(this.value==''){
                con.style.display='none';  //若文本为空,则隐藏大盒子
            }else{
                con.style.display='block';  //显示
            }            
        });


    </script>
</body>

肝JOJO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 43 常用的键盘事件

1.常用的键盘事件onkeyup 某个按键被松开时触发,不区分大小写 (最后执行)onkeydown 某个按键被按下时触发,不区分大小写 (先执行)onkeypress 某个按键被按下时触发,但是他不识别功能键 ctrl shift 箭头等 (后执行)例如:document.addEventListener('keyup',function(){ alert('松开触发'...
复制链接

扫一扫