效果如下



代码如下：

首先看目录

//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. DotNetty 实现 Modbus TCP 系列 (二) ModbusFunction 类图及继承举例

    本文已收录至:开源 DotNetty 实现的 Modbus TCP/IP 协议 ModbusFunction 类图如下: 如前文所述,所有请求/相应的 PDU 均继承自 ModbusFunction, ...

  2. crontab注意%

    %在其中有特殊含义表示开始新行 十分坑 例子:写一个定时任务用到date命令 crontab -e * * * * * date +%F >> /tmp/time.log 查看我们的cro ...

  3. debug错误

    Description "opt_design" can fail with error messages similar to the following: opt_design ...

  4. UVA 11988 Beiju Text

    https://vjudge.net/problem/UVA-11988 题目 你有一个破损的键盘.键盘上所有的键都可以正常工作,但有时候Home键或者End键会自动按下.你并不知道键盘存在这一问题, ...

  5. 【C/C++】递归算法

    所谓递归——函数的递归调用.c语言的这种特性给程序设计带来许多方便.尤其是接触数据结构时,会发现递归的出现频率非常之高,也行之有效~下面是笔者在接触递归这个东西时的一些个人总结和体会: 1.直接或间接 ...

  6. 了解AutoCAD对象层次结构 —— 2 ——文档

    再次想象另外一个场景:启动AutoCAD程序后,您新建了两个.dwg文件,也就是说创建了两个文档(Document)对象.将窗口进行层叠,您看到的窗口应该与下图类似: 图 4‑3 如何访问这些文档呢? ...

  7. 炎黄流程中改流程节点颜色的js

  8. wpgwhpg

    //f[i][j]就是第is时wpgwhpg的疲劳度是j,那么我们就可以就ta这1s是否休息进行讨论 #include<bits/stdc++.h> using namespace std ...

  9. 全局最小割Stoer-Wagner算法

    借鉴:http://blog.kongfy.com/2015/02/kargermincut/ 提到无向图的最小割问题,首先想到的就是Ford-Fulkerson算法解s-t最小割,通过Edmonds ...

  10. 【XSY2754】求和 莫比乌斯反演 杜教筛

    题目描述 给你\(n,p\),求 \[ \sum_{i=1}^n\sum_{j=1}^i\sum_{k=1}^i\gcd(i,j,k)\mod p \] \(n\leq {10}^9\) 题解 \[ ...