专栏首页前端学习笔记常用的键盘事件

常用的键盘事件

1 键盘事件

    <script>
        // 常用的键盘事件
        //1. keyup 按键弹起的时候触发 
        document.addEventListener('keyup', function() {
            console.log('我弹起了');
        })
​
        //3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keypress', function() {
                console.log('我按下了press');
        })
        //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keydown', function() {
                console.log('我按下了down');
        })
        // 4. 三个事件的执行顺序  keydown -- keypress -- keyup
    </script>

2 键盘事件对象

使用keyCode属性判断用户按下哪个键

    <script>
        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        document.addEventListener('keyup', function(e) {
            console.log('up:' + e.keyCode);
            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
            if (e.keyCode === 65) {
                alert('您按下的a键');
            } else {
                alert('您没有按下a键')
            }
        })
        document.addEventListener('keypress', function(e) {
            // console.log(e);
            console.log('press:' + e.keyCode);
        })
    </script>

3 案例:模拟京东按键输入内容

当我们按下 s 键, 光标就定位到搜索框(文本框获得焦点)。

注意:触发获得焦点事件,可以使用 元素对象.focus()

    <input type="text">
    <script>
        // 获取输入框
        var search = document.querySelector('input');
        // 给document注册keyup事件
        document.addEventListener('keyup', function(e) {
            // 判断keyCode的值
            if (e.keyCode === 83) {
                // 触发输入框的获得焦点事件
                search.focus();
            }
        })
    </script>

4 案例:模拟京东快递单号查询

要求:当我们在文本框中输入内容时,文本框上面自动显示大字号的内容。

    <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    <script>
        // 获取要操作的元素
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
        // 给输入框注册keyup事件
        jd_input.addEventListener('keyup', function() {
                // 判断输入框内容是否为空
                if (this.value == '') {
                    // 为空,隐藏放大提示盒子
                    con.style.display = 'none';
                } else {
                    // 不为空,显示放大提示盒子,设置盒子的内容
                    con.style.display = 'block';
                    con.innerText = this.value;
                }
            })
        // 给输入框注册失去焦点事件,隐藏放大提示盒子
        jd_input.addEventListener('blur', function() {
                con.style.display = 'none';
            })
        // 给输入框注册获得焦点事件
        jd_input.addEventListener('focus', function() {
            // 判断输入框内容是否为空
            if (this.value !== '') {
                // 不为空则显示提示盒子
                con.style.display = 'block';
            }
        })
    </script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 元素滚动 scroll 系列

    scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

    清出于兰
  • 初始JavaScript

    1.渲染引擎: 用来解析HTML与CSS,俗称内核,比如chrome浏览器的blink,老 版本的webkit

    清出于兰
  • 元素可视区 client 系列

    client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框...

    清出于兰
  • js实用方法记录-js动态加载css、js脚本文件

    方法测试:openApp('ios页面','**.apk','metools://home');

    易墨
  • 一种解决h5页面背景音乐不能自动播放的方案

    场景:微信、浏览器、App 普通解决方案:采用audio标签的autoplay属性 现象: 大部分IOS系统和少部分Android微信不支持自动播放 $解决方案...

    用户1217459
  • 前端基础-JavaScript继承

    cwl_java
  • PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解

    本文实例讲述了PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作。分享给大家供大家参考,具体如下:

    砸漏
  • 盘点2017你不可不知的十大黑科技

    如今,我们对“黑科技”这个词越来越不陌生了。实际上,这个词的原意是指非人类目前知识和科学水平可以做得到的技术或者产品。但在今天,它的含义是代表当前最高科技成就的...

    企鹅号小编
  • jQuery on绑定事件问题

    以前没注意,最近在使用on绑定事件时发现,通过for循环绑定动态绑定时,多个元素最终绑定的都是最后一次事件,不知道用while是不是也是一样,谁有清楚这种现象也...

    sucl
  • JS框架设计之加载器所在路径的探知一模块加载系统

    1、要加载一个模块,我们需要一个URL作为加载地址,一个script作为加载媒介,但用户在require是都用ID,我们需要一个将ID转换为URL的方法,思路很...

    郑小超.

扫码关注云+社区

领取腾讯云代金券