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 ...
随机推荐
- 数据源（Data Source
数据源(Data Source)顾名思义,数据的来源,是提供某种所需要数据的器件或原始媒体.在数据源中存储了所有建立数据库连接的信息.就像通过指定文件名称可以在文件系统中找到文件一样,通过提供正确的数 ...
- 使用jsp制作index，可以通过<c:if test==“管理员”>或<c:if test=="客户">来区别展示用户界面
<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ ta ...
- 【力扣】146. LRU缓存机制
运用你所掌握的数据结构,设计和实现一个 LRU (最近最少使用) 缓存机制.它应该支持以下操作: 获取数据 get 和 写入数据 put . 获取数据 get(key) - 如果关键字 (key) ...
- ES6解构赋值的简单使用
相较于常规的赋值方式,解构赋值最主要的是'解构'两个字,在赋值的过程中要清晰的知道等号右边的结构. 先简单地看一下原来的赋值方式. var a=[1,2] 分析一下这句代码的几个点: (1)变量申明和 ...
- python解释器安装指导教程
python解释器安装指导教程 1.官网下载 进入官网https://www.python.org/,在download下选择符合操作系统的版本 在找到合适的版本后选择相应的安装文件下载 2.进行安装 ...
- 转：Memcached 线程部分源码分析
目前网上关于memcached的分析主要是内存管理部分,下面对memcached的线程模型做下简单分析 有不对的地方还请大家指正,对memcahced和libevent不熟悉的请先google之 先看 ...
- LuoguB2105 矩阵乘法 题解
Content 给定一个 \(n\times m\) 的矩阵 \(A\) 和一个 \(m\times k\) 的矩阵 \(B\),求两个矩阵相乘得到的矩阵. \(n\times m\) 的矩阵 \(A ...
- Linux 磁盘分区和挂载
目录 Linux 磁盘分区和挂载 windows 下的分区 磁盘管理 相关命令 分区及挂载实现步骤 添加硬盘 分区步骤 步骤 挂载步骤 卸载分区步骤 补充: Linux 磁盘分区和挂载 windows ...
- 【剑指Offer】05. 替换空格 解题报告 (Python & C++ & Java)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 个人微信公众号:负雪明烛 目录 题目描述 解题方法 方法一:新建可变长度的容器 方法二:原 ...
- 【LeetCode】260. Single Number III 解题报告（Python & C++）
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 异或 字典 日期 题目地址:https://leet ...