Dom 键盘事件以及实战案例
键盘事件
//键盘操作
//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 键盘事件以及实战案例的更多相关文章
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- 深入理解DOM事件类型系列第二篇——键盘事件
× 目录 [1]类型 [2]顺序 [3]按键信息[4]应用 前面的话 鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件 类型 键盘事件用来描述键盘行为,主要有keydown ...
- DOM事件处理程序-事件对象-键盘事件
事件流: 事件流--描述的是从页面中接受事件的顺序 IE ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netsc ...
- React对比Vue（03 事件的对比，传递参数对比，事件对象，ref获取DOM节点，表单事件，键盘事件，约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- 《selenium2 python 自动化测试实战》（5）——键盘事件
键盘事件,就是键盘上的一些操作,比如Ctrl +C,Ctrl+V,Ctrl+X等. 对键盘的操作需要导入另一个键盘的库: from selenium.webdriver.common.keys imp ...
- 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...
- 2018.12/6 js键盘事件 DOM：0级2级
DOM0级事件元素绑定多个click最后只执行最后一个click. DOM2级事件元素绑定多个click,都要执行 注意当绑定的多个事件名,函数名,事件发生阶段三者完全一样时,才执行最后一个 div. ...
- 3-3 编程练习：jQuery键盘事件案例
3-3 编程练习 完善下面的代码,在input框中输入内容的时候同样显示在下面的p标签中 <!DOCTYPE html> <html lang="zh-CN"&g ...
- Selenium 2自动化测试实战11（键盘事件）
一.键盘事件 1.Keys()类提供了键盘上几乎所有按键的方法,如下实例: #coding:utf-8 from selenium.webdriver.common.keys import Keys ...
随机推荐
- mybatis错误 Mapped Statements collection does not contain value for
java.lang.IllegalArgumentException: Mapped Statements collection does not contain value for 在unit里测试 ...
- C语言编辑链接
库函数(Library Files)库函数就是函数的仓库,它们都经过编译,重用性不错.通常,库函数相互合作,来完成特定的任务.比如操控屏幕的库函数(cursers和ncursers库函数),数据库读取 ...
- springboot优雅实现异常处理
前言 在平时的 API 开发过程中,总会遇到一些错误异常没有捕捉到的情况.那有的小伙伴可能会想,这还不简单么,我在 API 最外层加一个 try...catch 不就完事了. 哈哈哈,没错.这种方法简 ...
- 【Java 8】函数式接口（一）—— Functional Interface简介
什么是函数式接口(Functional Interface) 其实之前在讲Lambda表达式的时候提到过,所谓的函数式接口,当然首先是一个接口,然后就是在这个接口里面只能有一个抽象方法. 这种类型的接 ...
- C#文件操作（IO流 摘抄）
11 文件操作概述 11.1 驱动器 在Windows操作系统中,存储介质统称为驱动器,硬盘由于可以划分为多个区域,每一个区域称为一个驱动器..NET Framework提供DriveInfo类和 D ...
- CPU中的上下文
目录 一.简介 二.进程切换 三.线程切换 四.中断切换 五.中断检测和查看 六.模拟 一.简介 Linux是多任务操作系统,cpu划分固定时间片,分给每个进程,当前进程时间片执行完毕,将挂起,运行下 ...
- Nginx配置重定向
目录 一.简介 二.配置 访问a页面重定向到b页面 访问当前nginx,重定向到其他网址 一.简介 据相关变量重定向和选择不同的配置,从一个 location 跳转到另一个 location,不过这样 ...
- 离散数学3.1&&3.3
离散数学 当前所使用的数字电脑是离散的,二进制指令,传输到内存 早先使用的模拟电脑是连续的 判断是否是命题(两个步骤)[不要跳步骤] 陈述句 要么是真命题要么是假命题 真假性 真:用T或1表示,假:用 ...
- ThreadLocal的使用方法
ThreadLocal的使用方法 (2011-10-10 22:05:48) 转载▼ 概述 ThreadLocal是什么呢?其实ThreadLocal并非是一个线程的本地实现版本,它并不是一个 ...
- 又拿奖了！腾讯云原生数据库TDSQL-C斩获2021PostgreSQL中国最佳数据库产品奖
日前,开源技术盛会PostgresConf.CN & PGconf.Asia2021大会(简称2021 PG亚洲大会)在线上隆重召开,腾讯云作为业内领先的云数据库服务商受邀出席,多位专家深入数 ...