效果如下



代码如下：

首先看目录

//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. springboot 如何操作redis

    1.首先应该引入 依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactI ...

  2. liunx安装nginx

    参考 https://blog.csdn.net/dyllove98/article/details/41120789 1,去官网下载最新的包 官网地址:http://nginx.org/downlo ...

  3. dashboard使用与访问

    #dashboard的github地址 https://github.com/kubernetes/dashboard #下载 wget https://raw.githubusercontent.c ...

  4. WEX5中ajax跨域访问的几种方式

    1.使用jsonp方式 使用jsonp访问的话,前端需要把回调函数名传递给后端,后端执行完后也需要把回调函数传回给前端,默认情况下ajax自动生成一个回调函数名,后端可以通过String callba ...

  5. PHPWord插件详解

    一下载PHPWorld并配置项目 1.PHPWord框架文件如下: 二使用word模板并使用PHPWord生成doc文件 例如:源代码如下: <?php require_once '../PHP ...

  6. LR 场景选项配置--笔记

    1 tools-options --设置关系到loadgenerator行为应用于一个场景中的所有的load generator 这些设置用于未来所有运行的场景并且通常只需要设置一次 2 expert ...

  7. windows下ping端口

    上图的操作完成以后  进入dos控制台 输入telnet  ip地址  端口号   回车 标识已ping通 ping不通是这种提示

  8. rmse均方根误差

    rmse=sqrt(sum((w-r).^2)/length(w))

  9. 洛谷P2918 [USACO08NOV]买干草（一道完全背包模板题）

    题目链接 很明显的一道完全背包板子题,做法也很简单,就是要注意 这里你可以买比所需多的干草,只要达到数量就行了 状态转移方程:dp[j]=min(dp[j],dp[j-m[i]]+c[i]) 代码如下 ...

  10. 觉得一篇讲SPFA还不错的文章

    我觉得他整理的有一些乱,我都改成插入代码了,看的顺眼一些 转载自http://blog.csdn.net/juststeps/article/details/8772755 下面的都是原文: 最短路径 ...