效果如下



代码如下：

首先看目录

//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的更多相关文章

  1. c# key event

    使用C#写ui时,希望能够读取到键盘输入的事件,用于快捷键或者其他操作.本文记录操作创建key event的方法. 参考链接: http://csharp.net-informations.com/g ...

  2. IBUS-WARNING **: Process Key Event failed: Timeout was reached

    在gvim中ibus敲字时,偶尔会在n秒之后才显示到屏幕,反应死慢.控制台会看到下面的错误信息. (gvim:): IBUS-WARNING **: Process Key Event failed: ...

  3. Android5.0L退出APP横竖屏切换导致的触摸屏输入（Touch Event）无效(冻屏)问题分析（Key Event仍然有效）

    .Nexus4和Nexus5在相同的简单測试下没有重现此问题,因没有源代码所以无法Debug和打印log.兴许会尝试获取nexus的源代码以了解它的改动方案. 二.解决方案 通过初步分析.深入分析.对 ...

  4. Tkinter教程之Event篇(3)

    本文转载自:http://blog.csdn.net/jcodeer/article/details/1823550 '''Tkinter教程之Event篇(3)''''''11.两个事件同时绑定到一 ...

  5. zepto源码学习-04 event

    之前说完$(XXX),然后还有很多零零碎碎的东西需要去分析,结果一看代码,发现zepto的实现都相对简单,没有太多可分析的.直接略过了一些实现,直接研究Event模块,相比JQuery的事件系统,ze ...

  6. jquery利用event.which方法获取键盘输入值的代码

    jquery利用event.which方法获取键盘输入值的代码,需要的朋友可以参考下. 实例 显示按了哪个键: $("input").keydown(function(event) ...

  7. Zepto源码分析-event模块

    源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT l ...

  8. 读Zepto源码之Event模块

    Event 模块是 Zepto 必备的模块之一,由于对 Event Api 不太熟,Event 对象也比较复杂,所以乍一看 Event 模块的源码,有点懵,细看下去,其实也不太复杂. 读Zepto源码 ...

  9. 一个普通的 Zepto 源码分析（三） - event 模块

    一个普通的 Zepto 源码分析(三) - event 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块, ...

  10. HTML5 元素拖拽实现 及 jquery.event.drag插件

    如上图片: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

随机推荐

  1. win10远程桌面连接提示身份验证错误，要求的函数不受支持的解决方案

    转自https://www.baidu.com/link?url=67JXh4h79mN47mEenuH_ElGkSh9_GdOiY-Xp9Ihw0_mQIZHrPx-HxY3EIm_nTZKPoRZ ...

  2. java获取本机ip（排除虚拟机等一些ip）最终解，总算找到方法了

    本文参考https://blog.csdn.net/u011809209/article/details/77236602 本文参考https://blog.csdn.net/yinshuomail/ ...

  3. 多线程的实现方式01 Thread

    /* * 多线程 有三种实现方式 * 其一 Thread * * 写一个类 * * 1.让他继承 Thread * 2.重写thread中的run方法 * 3.创建子类对象就是在 创建线程! * 3. ...

  4. 一、.NET Core MVC 项目结构模板

    一.图文描述,开口干 二.文件结构:  wwwroot 首先,Razor Pages项目中多了一个wwwroot的文件夹,这个文件夹中,主要存放网站的静态资源,如css,网站图片资源文件,js文件,三 ...

  5. SQL Server中获取指定时间段内的所有月份

    例如查询 2012-1-5 到 2012-11-3 之间所有的月份 declare @begin datetime,@end datetime set @begin='2012-1-5' set @e ...

  6. [西安交大附中集训] d6 删边(cip)

    B. 删边(cip.cpp/in/out 1S/256M) 题面 给出一个没有重边和自环的无向图,现在要求删除其中两条边,使得图仍然保持连通. 你的任务是计算有多少组不合法的选边方案.注意方案是无序二 ...

  7. 【建模应用】PCA主成分分析原理详解

    原文载于此:http://blog.csdn.net/zhongkelee/article/details/44064401 一.PCA简介 1. 相关背景 上完陈恩红老师的<机器学习与知识发现 ...

  8. Newtonsoft.Json 概述

    有时候,在前后台数据交互或者APP与后台交互的时候,我们通常会使用Json进行数据交互,为此会使用到Newtonsoft.Json.dll 这个类库,这个类库非微软官方,但是下载量已经超过了数十万次, ...

  9. Codeforces519 E. A and B and Lecture Rooms

    传送门:>Here< 题意:询问给出一棵无根树上任意两点$a,b$,求关于所有点$i$,$dist(a,i) = dist(b,i)$的点的数量.要求每一次询问在$O(log n)$的时间 ...

  10. python3，打印一年的某一天是一年的第几天

    year = int(input('year:')) month = int(input('month:')) day = int(input('day:')) months = (0,31,59,9 ...