效果如下



代码如下：

首先看目录

//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. Android——线程通讯 Handler、Looper、Message；

    线程通讯问题 (主要用到了Handler类,Looper类和Message类以及MessageQueue) 在Android中主线程如何向子线程中发送消息的问题.让我们来想想,这其中的过程,无非就是创 ...

  2. Python深入类和对象

    一. 鸭子类型和多态 1.什么是鸭子类型: 在程序设计中,鸭子类型(英语:Duck typing)是动态类型和某些静态语言的一种对象推断风格."鸭子类型"像多态一样工作,但是没有继 ...

  3. C#中List<T>排序

    在面向对象开发过程中我们经常将一组对象放到一个特定集合中,此时我们通常使用泛型集合来存放,常见的如:List.Dictionary等.在使用这些泛型集合时我们有时需要对其进行排序,下面我们就一起学习下 ...

  4. Jenkins+PowerShell持续集成环境搭建(八)邮件通知

    1. 默认邮件功能: Jenkins自带的邮件功能比较简单,配置如下: 设置默认发件人地址: 2. Email Extension Plugin 为了能够更加灵活地使用邮件功能,需要安装Email E ...

  5. c++ 怎么输出保留2位小数的浮点数

    //添加头文件 #include<iomanip> //定义变量 folat a=9.1; cout<<setiosflags(ios::fixed)<<setpr ...

  6. React 学习(一) ---- React Element /组件/JSX

    学习React的时候,你可能听到最多的就是要先学习webpack, babel,要先学会配置然后才能学react 等等,一堆的配置就把我们吓着了,根本就没有心情就学习react了.其实在最开始学习re ...

  7. hdu1875（最小生成树prime）

    思路:一开始想用贪心来着,发现贪心有缺陷,然后就用了最小生成树来写,这里用了prime算法,首先,先建个图,两点之间的边的权值就是两个点的距离,然后直接prime模板 代码 #include<i ...

  8. PKU2018校赛 H题 Safe Upper Bound

    http://poj.openjudge.cn/practice/C18H 题目 算平均数用到公式\[\bar{x}=\frac{x_1+x_2+x_3+\cdots+x_n}{n}\] 但如果用in ...

  9. 免费开源的会计软件 GnuCash 3.4 发布

    导读 GnuCash 3.4已经发布,GnuCash是免费和开源的会计软件.GnuCash开发团队宣布推出GnuCash 3.4,这是3.x稳定版系列的第五版. 变化 在3.3和3.4之间,完成了以下 ...

  10. python 模块之-shelve

    shelve模块比pickle模块简单,只有一个open函数,返回类似字典的对象,可读可写;key必须为字符串,而值可以是python所支持的数据类型 import shelve f = shelve ...