键盘事件

  //键盘操作

        //1.某键盘按下执行的操作  document是对文档进行触发

        document.onkeyup = function(){

            console.log('你好')

        }

        document.addEventListener('keyup',function(){

            console.log('你好')

        })

        //2.某键盘按下操作，此执行，只要键盘一直按着，就一直重复执行

        document.onkeydown = function(){

            console.log('按了键盘')

        }

        document.addEventListener('keydown',function(){

            console.log('我按下了键盘')

        })

        document.addEventListener('keypress',function(){  //keypress 事件是不能识别功能键的，比如：ctrl、左右箭头

            console.log('我按了press键')

        })

        //注意：如果keyup、keydown和keypress，同时出现执行顺序  keydown->keypress->keyup

       //可以查看到执行过程和属性

        document.addEventListener('keyup',function(e){

                console.log(e)

        })

        //keyCode 是对应键盘的Ascll码值

        //注意：keyup和keydown 不区分字母大小写，如果想区分可以用可以keypress

案例一：

        //京东首页按s键光标自动定位到搜索框

        var search = document.querySelector('input');

        document.addEventListener('keyup',function(){ //用keyup事件是因为keydown执行并将内容赋值给input.value

            if(e.keyCode === 83) {  //s的Ascll码是83

                search.focus();     //让搜索框得到光标

            }

        })

案例二：

   //京东订单查询功能

        <!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>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .search {

            position: relative;

            width: 178px;

            margin: 100px;

        }

        .con {

            display: none;

            position: absolute;

            top: -40px;

            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" class="jd" placeholder="请输入快递单号">

     </div>

     <script>

         思路：

        // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）

        // 表单检测用户输入： 给表单添加键盘事件

        // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容

        // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子

         //获取元素

         var con = document.querySelector('.con');

         var jd_input = document.querySelector('.jd');

         jd_input.addEventListener('keyup',function(){

        /*注意：事件触发keydown和keypress在文本框里面的特点：

        他们两个事件触发的时候，文字还没有落入文本中去*/

             if (this.value == ''){

                con.style.display = 'none';

             } else {

                con.style.display = 'block';

                con.innerHTML = this.value;

            }

         })

         //得到焦点

         jd_input.addEventListener('blur',function(){

             con.style.display = 'none';

         })

         //失去焦点

         jd_input.addEventListener('foucs',function(){

             if(jd_input !== ''){

                 con.style.display = 'block'

             }

         })

     </script>

</body>

</html>

Dom 键盘事件以及实战案例的更多相关文章

  1. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  2. 深入理解DOM事件类型系列第二篇——键盘事件

    × 目录 [1]类型 [2]顺序 [3]按键信息[4]应用 前面的话 鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件 类型 键盘事件用来描述键盘行为,主要有keydown ...

  3. DOM事件处理程序-事件对象-键盘事件

    事件流: 事件流--描述的是从页面中接受事件的顺序 IE  ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netsc ...

  4. React对比Vue（03 事件的对比，传递参数对比，事件对象，ref获取DOM节点，表单事件，键盘事件，约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

  5. 《selenium2 python 自动化测试实战》（5）——键盘事件

    键盘事件,就是键盘上的一些操作,比如Ctrl +C,Ctrl+V,Ctrl+X等. 对键盘的操作需要导入另一个键盘的库: from selenium.webdriver.common.keys imp ...

  6. 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...

  7. 2018.12/6 js键盘事件 DOM：0级2级

    DOM0级事件元素绑定多个click最后只执行最后一个click. DOM2级事件元素绑定多个click,都要执行 注意当绑定的多个事件名,函数名,事件发生阶段三者完全一样时,才执行最后一个 div. ...

  8. 3-3 编程练习：jQuery键盘事件案例

    3-3 编程练习 完善下面的代码,在input框中输入内容的时候同样显示在下面的p标签中 <!DOCTYPE html> <html lang="zh-CN"&g ...

  9. Selenium 2自动化测试实战11（键盘事件）

    一.键盘事件 1.Keys()类提供了键盘上几乎所有按键的方法,如下实例: #coding:utf-8 from selenium.webdriver.common.keys import Keys ...

随机推荐

  1. Redis cluster 集群报错合集

    目录 一.连接集群操作报错(error)MOVED 二.集群关闭后重启报错 三.Redis (error) NOAUTH Authentication required 四.Redis集群使用中突然挂 ...

  2. String类源码分析

    1.String类注释说明 /** * The {@code String} class represents character strings. All * string literals in ...

  3. [HarekazeCTF2019]baby_rop

    看到名字就想到了用rop来做这道题 老样子chescksec和file一下 可以看到是64位的程序开启了nx保护,把程序放到idax64里 可以看到有system和/bin/sh,/bin/sh无法跟 ...

  4. 2019"深思杯"山东省大学生网络安全技能大赛部分wp

    签到 载入OD查看字符串 上下左右 这道题出来的时候真的是一点思路都没有,一直以为是什么编码来着,看了大佬们的 wp 原来是画图 拿大佬的脚本: from PIL import Image im = ...

  5. tomcat架构分析及配置详解

    浏览器访问服务器的流程 请求发起的过程: 注意:浏览器访问服务器使用的是http协议,http是应用层协议,而具体传输还是使用的TCP/IP协议 Tomcat系统总架构 2.1 Tomcat请求处理过 ...

  6. java 编程基础：注解的功能和作用，自定义注解

    1,什么是注解: 从JDK5开始,Java增加了对元数据 (MetaData)的支持,也就是Annotation注解,这种注解与注释不一样,注解其实是代码里的特殊标记,这些标记可以在编译.类加载 运行 ...

  7. ubantu电脑无法开机修复

    重启Ubuntu,随即长按F9进入grub菜单:在grub菜单中,选择recovery mode,回车确认:在Recovery Menu中,选择"Root Drop to root shel ...

  8. JAVAWeb项目实现在线预览、打开office文件

    Web项目实现在线预览浏览word.ppt.excel文档方法 调用以下链接 https://view.officeapps.live.com/op/view.aspx?src=你的文档绝对路径 这里 ...

  9. 出现线上bug，测试人能做些什么？

    测试奇谭,BUG不见. 大家好,我是谭叔. 一提到线上问题,很多测试小白要么"原则性"恐惧,要么憨憨如也,不知如何下手. 本篇文章,我再细化下这道常见的面试题,跟大家捋捋发生线上问 ...

  10. 【LeetCode】1064. Fixed Point 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 暴力求解 日期 题目地址:https://leetco ...