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 ...
随机推荐
- Element-ui 中对表单进行验证
Element-ui 中对表单(Form)绑定的对象中的对象属性进行校验 如果是直接绑定属性,是可以的,但是绑定对象中的属性就需要特别处理,需要在rules中添加双引号 " "或者 ...
- my40_MySQL锁概述之意向锁
本文在锁概述的基础上,通常实验举例,详细地介绍了意向锁的原理. 锁范围 全局锁(global lock)表锁(table lock)行锁 (row lock) ROW LOCK的粒度LOCK_REC ...
- Turbine使用
一.简介 Turbine是聚合服务器发送事件流数据的一个工具,Hystrix的监控中,只能监控单个节点,实际生产中都为集群,因此可以通过Turbine来监控集群下Hystrix的metrics情况 T ...
- typora使用快捷键
1. Ctrl+/ 切换源码模式2. ```css 选择语言 回车.4. `code` ctrl+shit+` 5. # 1号标题 ctrl+1 ### 3号标题 ctrl+3 ######6号标题 ...
- Spring 的 init-method 和 destory-method
关于在spring 容器初始化 bean 和销毁前所做的操作定义方式有三种 第一种注解: 通过@PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作 ...
- C++11 标准库 bind 函数
bind 是什么? bind 顾名思义: 绑定 通俗来讲呢,可以这么理解有点像函数指针的意思. 资料上是这么讲的:可以将 bind 函数看做一个通用函数的适配器,它接受一个可调用对象,生成一个新的可以 ...
- Jenkins安全加固
1.jenkins未授权访问 描述 jenkins不当配置可导致未授权访问管理控制台,可以通过脚本命令行执行系统命令.通过该漏洞,可以后台管理服务,通过脚本命令行功能执行系统命令,如反弹shell,w ...
- <转>Java NIO API
Java NIO API详解 NIO API 主要集中在 java.nio 和它的 subpackages 中: java.nio 定义了 Buffer 及其数据类型相关的子类.其中被 java.ni ...
- libevent 资源链接
* libevent官网:http://libevent.org/ * libevent API:http://www.monkey.org/~provos/libevent/doxygen-2.0 ...
- STL 较详尽总结
STL就是Standard Template Library,标准模板库.这可能是一个历史上最令人兴奋的工具的最无聊的术语.从根本上说,STL是一些"容器"的集合,这些" ...