key-event
效果如下
代码如下：
首先看目录
//index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>KeyboardEvent.key</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
</head>
<body>
<div class="flex flex-left">
<textarea rows="5" id="test-target"></textarea>
<button id="btn-clear-console">清空控制台</button>
</div>
<div class="flex flex-right">
<div id="console-log"></div>
</div>
</body>
</html>
//main.js
//输入的内容
const textarea = document.getElementById('test-target');
//右边
const consoleLog = document.getElementById('console-log');
//点击按钮
const btnClearConsole = document.getElementById('btn-clear-console');
function logMessage(message) {
//动态创建p标签，存储textarea.addEventListener中监听的内容
const p = document.createElement('p');
p.appendChild(document.createTextNode(message));
consoleLog.appendChild(p);
}
textarea.addEventListener('keydown', e => {
if (!e.repeat)
logMessage(`第一个 keydown 事件。key 属性的值为"${e.key}"`);
else
logMessage(`keydown 事件重复。key 属性的值为"${e.key}"`);
});
textarea.addEventListener('beforeinput', e => {
logMessage(`beforeinput 事件。你准备输入"${e.data}"`);
});
textarea.addEventListener('input', e => {
logMessage(`input 事件。你刚刚输入了"${e.data}"`);
});
textarea.addEventListener('keyup', e => {
logMessage(`keyup 事件。key 属性的值为"${e.key}"`);
});
//点击 btnClearConsole移除内容 这里是移除右边consoleLog中的元素
btnClearConsole.addEventListener('click', e => {
let child = consoleLog.firstChild;
while (child) {
consoleLog.removeChild(child);
child = consoleLog.firstChild;
}
});
//style.css
body {
-webkit-display: flex;
display: flex;
}
.flex {
padding-left: 20px;
padding-right: 20px;
}
.flex-left {
flex: 1;
flex-grow: 1;
-webkit-flex: 1;
-webkit-flex-grow: 1;
}
.flex-right {
flex: 2;
flex-grow: 2;
-webkit-flex: 2;
-webkit-flex-grow: 2;
}
#test-target {
display: block;
width: 100%;
margin-bottom: 10px;
resize: none;
}
#console-log {
overflow: auto;
}
key-event的更多相关文章
- c# key event
使用C#写ui时,希望能够读取到键盘输入的事件,用于快捷键或者其他操作.本文记录操作创建key event的方法. 参考链接: http://csharp.net-informations.com/g ...
- IBUS-WARNING **: Process Key Event failed: Timeout was reached
在gvim中ibus敲字时,偶尔会在n秒之后才显示到屏幕,反应死慢.控制台会看到下面的错误信息. (gvim:): IBUS-WARNING **: Process Key Event failed: ...
- Android5.0L退出APP横竖屏切换导致的触摸屏输入（Touch Event）无效(冻屏)问题分析（Key Event仍然有效）
.Nexus4和Nexus5在相同的简单測试下没有重现此问题,因没有源代码所以无法Debug和打印log.兴许会尝试获取nexus的源代码以了解它的改动方案. 二.解决方案 通过初步分析.深入分析.对 ...
- Tkinter教程之Event篇(3)
本文转载自:http://blog.csdn.net/jcodeer/article/details/1823550 '''Tkinter教程之Event篇(3)''''''11.两个事件同时绑定到一 ...
- zepto源码学习-04 event
之前说完$(XXX),然后还有很多零零碎碎的东西需要去分析,结果一看代码,发现zepto的实现都相对简单,没有太多可分析的.直接略过了一些实现,直接研究Event模块,相比JQuery的事件系统,ze ...
- jquery利用event.which方法获取键盘输入值的代码
jquery利用event.which方法获取键盘输入值的代码,需要的朋友可以参考下. 实例 显示按了哪个键: $("input").keydown(function(event) ...
- Zepto源码分析-event模块
源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT l ...
- 读Zepto源码之Event模块
Event 模块是 Zepto 必备的模块之一,由于对 Event Api 不太熟,Event 对象也比较复杂,所以乍一看 Event 模块的源码,有点懵,细看下去,其实也不太复杂. 读Zepto源码 ...
- 一个普通的 Zepto 源码分析（三） - event 模块
一个普通的 Zepto 源码分析(三) - event 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块, ...
- HTML5 元素拖拽实现 及 jquery.event.drag插件
如上图片: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
随机推荐
- python爬虫之短信报警
1 import smtplib import email.mime.multipart import email.mime.text def send_email(content=''): &quo ...
- 如何使用 Yum Repository 安装指定版本的 MySQL
自从从使用 debian 系的 apt-get 转到使用 yum 工具之后一直不是很习惯,也没有去看过很多工具包安装的时候到底影响到了哪些文件等.这次借这次社区版 MySQL 安装来一并梳理一下. 首 ...
- python工具使用笔记
1.pip pip是Python官方推荐的包管理工具,在doc界面直接使用pip或者pip3命令即可,例如安装gensim: C:\Users\kayan.sjc>pip3 install -- ...
- python 计算机基础
1.什么是编程语言. 语言是一个事物与另一个事物沟通的介质. 编程语言是程序员与计算机沟通的介质. 2.什么是编程. 编程是人按照某种语法规范设计出计算机能够识别的语言 表达的结果是程序,程序就是一系 ...
- size_t的使用
size_t的取值range是目标平台下最大可能的数组尺寸 典型的例子:x64平台下size_t是8位,而x32平台下是4位: int在两个平台下均为4位 所以在使用的时候一定要配置好对应的平台,否则 ...
- [UOJ455][UER #8]雪灾与外卖——堆+模拟费用流
题目链接: [UOJ455]雪灾与外卖 题目描述:有$n$个送餐员(坐标为$x_{i}$)及$m$个餐厅(坐标为$y_{i}$,权值为$w_{i}$),每个送餐员需要前往一个餐厅,每个餐厅只能容纳$c ...
- BZOJ4317Atm的树&BZOJ2051A Problem For Fun&BZOJ2117[2010国家集训队]Crash的旅游计划——二分答案+动态点分治(点分树套线段树/点分树+vector)
题目描述 Atm有一段时间在虐qtree的题目,于是,他满脑子都是tree,tree,tree…… 于是,一天晚上他梦到自己被关在了一个有根树中,每条路径都有边权,一个神秘的声音告诉他,每个点到其他的 ...
- POJ 3621-Sightseeing Cows-最优比率环｜SPFA+二分
最优比率环问题.二分答案,对于每一个mid,把节点的happy值归类到边上. 对于每条边,用mid×weight减去happy值,如果不存在负环,说明还可以更大. /*---------------- ...
- 洛谷P2045 K方格取数(算竞进阶习题)
费用流 又是一道网络流的模型,对于这种费用与经过次数有关的边,我们经常把边拆成多条,比如这个题,第一次费用是x,第二次是0,我们就可以先把点拆成入点和出点,入点和出点又连两条边,第一条容量为1,费用为 ...
- 洛谷P2740 草地排水
最大流 一道完全符合最大流定义的板子题..重新学了一次网络流,希望有更深的理解把.. #include <bits/stdc++.h> #define INF 0x3f3f3f3f #de ...