效果如下



代码如下：

首先看目录

//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. liunx 运维知识一部分

    一   克隆虚拟机 大家都需要做的克隆虚拟机,在克隆虚拟机之前,需要把网卡源的UUID和Mac地址全部删除掉.不然相同会冲突使用不了. 删除UUID跟Mac的操作步骤如下:  cd /etc/sysc ...

  2. python数学第五天【常用概率分布】

    1. 概率基本公式 思考题: 3. 两点分布 4. 二项分布 推论一: 5.柏松分布 6. 均匀分布 7. 指数分布 8. 正态分布 9.常见分布的总结

  3. 面对AI

    面对AI,我们应该怎么做? 李开复博士的一段话: 1. 我们应该具有战略性思维,并以人工智能无法取代的工作为目标.我们应该致力于终身学习,更新我们的技能,了解新趋势,并寻找新机遇. 2. 我们应该鼓励 ...

  4. vue环境搭建+vscode

    https://blog.csdn.net/junshangshui/article/details/80376489

  5. 一、关于a标签伪类中的visited不起作用问题

    一.代码示范 <html> <head> <title>伪类超链接</title> <!--<link href="./test. ...

  6. 一、linux扩展

    1.linux-解压bz2文件提示tar (child): bzip2: Cannot exec: No such file or directory 原因,linux下没有bzip2解压工具 安装b ...

  7. 三、ASP.NET Core 部署Linux

    预备工作 1.删除dotnet core sdk sudo yum erase libunwind libicu 2.删除链接 sudo rm -rf /usr/local/bin 3.sudo yu ...

  8. layui弹窗 之 iframe关闭

    1)关闭特定iframe //当在iframe页面关闭自身时,在iframe页执行以下js脚本 var index = parent.layer.getFrameIndex(window.name); ...

  9. orcale增加列脚本

    --编号declare v_cnt number; V_SQL VARCHAR2 (500) := '';begin select count(*) into v_cnt from dual wher ...

  10. Bash 5.0 发布及其新功能

    导读 邮件列表证实最近发布了 Bash-5.0.而且,令人兴奋的是它还有新的功能和变量.如果你一直在使用 Bash 4.4.XX,那么你一定会喜欢 Bash 的第五个主要版本. 第五个版本侧重于新的 ...