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 ...
随机推荐
- 如何使用nodejs快速搭建本地服务器
1.首先要安装好node,js 2.以下有安装包下载的链接:这里的安装包是.msi,如果要其他的,可以到菜鸟教程上去找 32 位安装包下载地址 : https://nodejs.org/dist/v4 ...
- freemarker 简单操作
操作字符串函数 1. substring(start,end)从一个字符串中截取子串 start:截取子串开始的索引,start必须大于等于0,小于等于end end: 截取子串的长度,end必须大于 ...
- HTML5 History API & URL 重定向
HTML5 History API & URL 重定向 disabled server url redirect https://developer.mozilla.org/en-US/doc ...
- 关于IWMS后台登录问题总结
一.登录后台,点击登录无反应: 1.是因为网站文件夹没有权限,需要右击文件夹,将只读勾选去掉 2.在安全中加入Everyone对象. 二.登录后台后,左边显示不全,是因为会员权限不够,需要给权限.
- Eclipse：报错Failed to read artifact descriptor for org.springframework.boot:spring-boot-autoconfigure:jar:2.1.2.
导入SVN下载的MAVEN项目时springboot报错: pom.xml文件报错 Failed to read artifact descriptor for org.springframework ...
- 【Java】Android EditText开发的一个容易忽略的坑
这几天接手做一个远程控制Android application,安卓前台的EditText用来输入ip地址.端口等信息,发现EditText的使用存在着巨坑一个! 我在网上找了半天,发现仅仅有人提出这 ...
- 前端使用Javascrip实现图片轮播
Javascript实现网页图片自动轮播 1.创建一个img标签 设置默认图片,以及图片的高度和宽度,为了大家方便,我将CSS样式和JS语句都写在一个html文件中,演示用的图片来自小明官网:'htt ...
- 自己实现memcpy，strcpy与strncpy
内存拷贝函数 //实现拷贝不重叠的内存块 void* memcpy1(void* dst,const void* src,size_t count) { char* pTo = (char*)dst; ...
- IDEA下载依赖时提示 resolving dependencies of xxx, yyy
IDEA下载依赖时提示 resolving dependencies of xxx, yyy ,卡住不动 使用Maven命令可以更清楚地分析问题,在IDEA命令行窗口执行mvn compile命令,提 ...
- BZOJ4475[Jsoi2015]子集选取——递推(结论题)
题目描述 输入 输入包含一行两个整数N和K,1<=N,K<=10^9 输出 一行一个整数,表示不同方案数目模1,000,000,007的值. 样例输入 2 2 样例输出 16 可以发现 ...