JavaScript键盘鼠标监听功能

最新推荐文章于 2024-07-16 20:08:38 发布
最新推荐文章于 2024-07-16 20:08:38 发布
阅读量6.2k 收藏 17
点赞数 5
分类专栏： JavaScript 文章标签： html javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suwu150/article/details/90899717
版权

实际应用中,我们会遇到监听按键输入和鼠标点击事件,在这里我们进行对鼠标和键盘事件的总结.

Keyboard​Event

KeyboardEvent 对象描述了键盘的交互方式。 每个事件都描述了一个按键（Each event describes a key）；事件类型keydown， keypress 与 keyup 可以确定是哪种事件在活动。
KeyboardEvent 表示刚刚发生在按键上的事情。 当你需要处理文本输入的时候，使用 HTML5 input 事件代替。例如，用户使用手持系统如平板电脑输入时， 按键事件可能不会触发。

方法

本接口同样会继承对象父代的方法， UIEvent 和 Event。

  • KeyboardEvent.getModifierState()返回一个 Boolean，表示在事件创建时，修改键如Alt ， Shift， Ctrl， Meta等是否按下。
  • KeyboardEvent.initKeyEvent()初始化一个 KeyboardEvent 对象。 现在的标准方式是使用 KeyboardEvent() 构造器。
  • KeyboardEvent.initKeyboardEvent() 初始化一个 KeyboardEvent 对象。 现在的标准方式是使用 KeyboardEvent() 构造器。

介绍下我们常用的一些属性：

  • KeyboardEvent.key
  • KeyboardEvent.code
  • KeyboardEvent.ctrlKey
  • KeyboardEvent.shiftKey
  • KeyboardEvent.altKey
  • KeyboardEvent.metaKey

KeyboardEvent.ctrlKey | shiftKey | altKey | metaKey 比较简单，表示当你按下键盘的时候，Ctrl | Shift | Alt | meta 按键是否已经被按下。如果已经被按下这些值就是 true，通常我们要运用组合键的判断会用到（譬如：Alt + a）。大家看到 meta 会疑惑这个是哪个键？在 Mac 平台上指的是 command 键（⌘），而在 Windows 平台指的是 windows 键（⊞）。但是不是所有 Windows 电脑键盘都有 ⊞ 这个键的。接下来我们介绍下最重要的两个属性 key 和 code。

KeyboardEvent.key

如果你按下的按钮所代表的是一个可打印的字符（printed representation），那么这个 key 的值就是这个字符（譬如：a、Enter、Shift、CapsLock、Backspace）。。

KeyboardEvent.code

这个值比较诡异，它表示你按了键盘上的哪个按键。你按 a，code 的值是 KeyA，你按左边的 Shift，code 的值是 ShiftLeft。什么意思呢？就是他表示你按的按键在键盘的哪个位置。这里就有趣了，因为不同语言的键盘同一个键代表的字符可能不同，但是位置是相同的。打个比方：KeyQ 代表的是我们普通键盘q按键。但是呢 Dvorak 键盘q这个位置的按钮代表的不是 q，而是'。所以如果你按同一个按钮，key 的值可能不同，code 的值会相同。

KeyboardEvent.keyCode 只读

返回一个表示系统和实现相关的数字代码的 Number， 用于标识按键的未修改值。
了解了上面属性,我们就可以进行使用代码的方式实时获取输入的键值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件监听</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding-top: 20px;
        }

        table,
        table tr th,
        table tr td {
            border: 1px solid #000;
        }

        table {
            min-height: 25px;
            line-height: 25px;
            text-align: center;
            border-collapse: collapse;
            padding: 2px;
        }

        th {
            width: 150px;
        }
    </style>
    <script type="text/javascript" language=JavaScript>
        window.onload = function () {
          const key = document.getElementById('key');
          const keyCode = document.getElementById('keyCode');
          const code = document.getElementById('code');
          const ctrlKey = document.getElementById('ctrlKey');
          const metaKey = document.getElementById('metaKey');
          const shiftKey = document.getElementById('shiftKey');
          const altKey = document.getElementById('altKey');
          const combineKey = document.getElementById('combineKey');


          document.onkeydown = function(event) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            e.preventDefault();  //阻止默认事件
            // 设置获取的值
            key.innerHTML = e.key;
            keyCode.innerHTML = e.keyCode;
            code.innerHTML = e.code;
            ctrlKey.innerHTML = e.ctrlKey;
            metaKey.innerHTML = e.metaKey;
            shiftKey.innerHTML = e.shiftKey;
            altKey.innerHTML = e.altKey;

            if (e.altKey || e.shiftKey || e.metaKey || e.ctrlKey) {
              let result = '';
              if (e.altKey) {
                result = 'Alt';
              } else if (e.shiftKey) {
                result = 'Shift';
              } else if (e.metaKey) {
                result = 'Meta';
              } else if (e.ctrlKey) {
                result = 'Control';
              }
              combineKey.innerHTML = result !== e.key ? `${result} + ${e.key}` : `${result}`;
            }  else {
              combineKey.innerHTML = '-';
            }
          };
        }
    </script>
</head>
<body>
<div id="container">
    <table border="0px">
        <tr>
            <th>key</th>
            <th>keyCode</th>
            <th>code</th>
            <th>ctrlKey</th>
            <th>metaKey</th>
            <th>shiftKey</th>
            <th>altKey</th>
            <th>组合健</th>
        </tr>
        <tr>
            <td id="key">-</td>
            <td id="keyCode">-</td>
            <td id="code">-</td>
            <td id="ctrlKey">-</td>
            <td id="metaKey">-</td>
            <td id="shiftKey">-</td>
            <td id="altKey">-</td>
            <td id="combineKey">-</td>
        </tr>
    </table>
    <hr />
</div>
</body>
</html>

显示结果如下:
在这里插入图片描述
当我们在键盘上输入键值时,会有相应的属性显示,也可以点击该链接实时尝试:

See the Pen keyboardEvent by suwu150 ( @suwu150) on CodePen.
Mouse​Event​

从上面我们了解到了键盘事件的监听,在这里我们继续学习鼠标事件的监听:
MouseEvent 接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括：click，dblclick，mouseup，mousedown。

介绍下我们常用的一些属性:

  • MouseEvent.altKey 只读,当鼠标事件触发的时，如果alt 键被按下，返回true;
  • MouseEvent.button 只读,当鼠标事件触发的时，如果鼠标按钮被按下（如果有的话），将会返回一个数值。这些数值代表的意义分别是,button=0（鼠标左键），button=2（鼠标右键），button=1（鼠标中间键）
  • MouseEvent.buttons 只读,当鼠标事件触发的时，如果多个鼠标按钮被按下（如果有的话），将会返回一个或者多个代表鼠标按钮的数字。这些数值代表的意义分别是,buttons=1（鼠标左键），buttons=2（鼠标右键），buttons=3（同时按下左健和右键）,buttons=4（鼠标中间键）,buttons=5（同时按下左健和中间键）,buttons=6（同时按下中间健和右键）,buttons=7（同时按下左健、右键和中间键）.
  • MouseEvent.clientX 只读,鼠标指针在点击元素（DOM）中的X坐标。
  • MouseEvent.clientY 只读,鼠标指针在点击元素（DOM）中的Y坐标。
  • MouseEvent.ctrlKey 只读,当鼠标事件触发时，如果 control 键被按下，则返回 true；
  • MouseEvent.metaKey 只读,当鼠标事件触发时，如果 meta键被按下，则返回 true；
  • MouseEvent.shiftKey 只读当鼠标事件触发时，如果 shift 键被按下，则返回 true；
  • MouseEvent.which 只读,当鼠标事件触发时，表示被按下的按钮。

同样的,我们使用代码进行获取鼠标点击时触发的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件监听</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding-top: 20px;
        }

        table,
        table tr th,
        table tr td {
            border: 1px solid #000;
        }

        table {
            min-height: 25px;
            line-height: 25px;
            text-align: center;
            border-collapse: collapse;
            padding: 2px;
        }

        th {
            width: 130px;
        }
    </style>
    <script type="text/javascript" language=JavaScript>
      function doNothing(){
        window.event.returnValue=false;
        return false;
      }

        window.onload = function () {
          const button = document.getElementById('button');
          const buttons = document.getElementById('buttons');
          const clientX = document.getElementById('clientX');
          const clientY = document.getElementById('clientY');
          const ctrlKey = document.getElementById('ctrlKey');
          const metaKey = document.getElementById('metaKey');
          const shiftKey = document.getElementById('shiftKey');
          const altKey = document.getElementById('altKey');
          const which = document.getElementById('which');
          const combineKey = document.getElementById('combineKey');


          document.onmousedown = function(event) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            e.preventDefault();  //阻止默认事件
            // 设置获取的值
            button.innerHTML = e.button;
            buttons.innerHTML = e.buttons;
            clientX.innerHTML = e.clientX;
            clientY.innerHTML = e.clientY;
            ctrlKey.innerHTML = e.ctrlKey;
            metaKey.innerHTML = e.metaKey;
            shiftKey.innerHTML = e.shiftKey;
            altKey.innerHTML = e.altKey;
            which.innerHTML = e.which;

            function getButton(value) {
              let buttonname = '';
              if (value === 0) buttonname = '鼠标左键';
              if (value === 1) buttonname = '鼠标中间键';
              if (value === 2) buttonname = '鼠标右键';
              return buttonname;
            }

            if (e.altKey || e.shiftKey || e.metaKey || e.ctrlKey) {
              let result = '';
              if (e.altKey) {
                result = 'Alt';
              } else if (e.shiftKey) {
                result = 'Shift';
              } else if (e.metaKey) {
                result = 'Meta';
              } else if (e.ctrlKey) {
                result = 'Control';
              }
              combineKey.innerHTML = `${result} + ${getButton(e.button)}`;
            }  else {
              combineKey.innerHTML = getButton(e.button);
            }
          };
        }
    </script>
</head>
<body oncontextmenu="doNothing()">
<div id="container">
    <table border="0px">
        <tr>
            <th>button</th>
            <th>buttons</th>
            <th>clientX</th>
            <th>clientY</th>
            <th>ctrlKey</th>
            <th>metaKey</th>
            <th>shiftKey</th>
            <th>altKey</th>
            <th>which</th>
            <th>组合健</th>
        </tr>
        <tr>
            <td id="button">-</td>
            <td id="buttons">-</td>
            <td id="clientX">-</td>
            <td id="clientY">-</td>
            <td id="ctrlKey">-</td>
            <td id="metaKey">-</td>
            <td id="shiftKey">-</td>
            <td id="altKey">-</td>
            <td id="which">-</td>
            <td id="combineKey">-</td>
        </tr>
    </table>
    <hr />
</div>
</body>
</html>

效果如下:

在这里插入图片描述
可参见以下链接进行操作:

See the Pen MouseEvent by suwu150 ( @suwu150) on CodePen.
常见键值
字母和数字键的键码值(keyCode)
按键键码按键键码按键键码按键键码
A65J74S83149
B66K75T84250
C67L76U85351
D68M77V86452
E69N78W87553
F70O79X88654
G71P80Y89755
H72Q81Z90856
I73R82048957
数字键盘上的键的键码值(keyCode)功能键键码值(keyCode)
按键键码按键键码按键键码按键键码
0968104F1112F7118
1979105F2113F8119
298*106F3114F9120
399+107F4115F10121
4100Enter108F5116F11122
5101-109F6117F12123
6102.110
7103/111
控制键键码值(keyCode)
按键键码按键键码按键键码按键键码
BackSpace8Esc27Right Arrow39-_189
Tab9Spacebar32Dw Arrow40.>190
Clear12Page Up33Insert45/?191
Enter13Page Down34Delete46`~192
Shift16End35Num Lock144[{219
Control17Home36;:186/|220
Alt18Left Arrow37=+187]}221
Cape Lock20Up Arrow38,<188'"222
多媒体键码值(keyCode)
按键键码按键键码按键键码按键键码
音量加175
音量减174
停止179
静音173
浏览器172
邮件180
搜索170
收藏171

参考链接:

1.https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent
2.https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/ctrlKey

suwu150
关注
专栏目录
java 监听shift按下_使用JS监听键盘按下事件（keydown event）
weixin_30692969的博客
02-28 1486
1、监听全局键盘按下事件，例如监听全局回车事件$(document).keydown(function(event){if(event.keyCode == 13){alert('你按下了Enter');}});2、监听某个组件键盘按下事件，例如监听id为btn的button组件的回车按下事件$("#btn").keydown(function(event){if(event.keyCode==1...
javascript之键盘与鼠标事件
车晋强的专栏
03-07 948
第十章  键盘和鼠标事件处理 键盘和鼠标事件处理功能非常强大，在网页设计中经常用到。这一章将介绍相关的内容。 10.1事件处理 在本节给出一个例子，当用户在Web页面中单击鼠标左键时，程序要能够报告鼠标所在的位置，当和户释放鼠标键时，需要报告鼠标键已经弹起，如果用户在按下三个功能键的同时再按下鼠标键，也应当给出详细的报告。 在实际应用中，鼠标右键对程序控制来说是没有用的，因为浏览器已经预先
WebKit 内核浏览器 initKeyboardEvent 函数原型
weixin_34183910的博客
06-22 746
学习JS发送自定义键盘（KeyboardEvent）事件的过程中，遇到了一个小难题：单个按键Tab可以正常发送，焦点能够转移到下一个元素，但想实现Shift+Tab，反向移动焦点时，却被DOM3的浏览器兼容性问题难到了。 根据参考资料1（浅谈Javascript事件模拟 - Mr_BackKom - 博客园 ）的方法，行不通，因为我的浏览器是在Webkit核心下。 再找参考资料2（Docu...
JavaScript如何实现监听键盘输入和鼠标监点击
11-20
实际应用中,我们会遇到监听按键输入和鼠标点击事件,在这里我们进行对鼠标和键盘事件的总结. Keyboard​Event KeyboardEvent 对象描述了键盘的交互方式。 每个事件都描述了一个按键（Each event describes a key）；事件类型keydown， keypress 与 keyup 可以确定是哪种事件在活动。 KeyboardEvent 表示刚刚发生在按键上的事情。 当你需要处理文本输入的时候，使用 HTML5 input 事件代替。例如，用户使用手持系统如平板电脑输入时， 按键事件可能不会触发。 方法 本接口同样会继承对象父代的方法， UIEvent 和 E
JavaScript 事件监听详解
最新发布
xycxycooo的博客
07-16 1414
在 JavaScript 编程中，事件监听是一种非常重要的机制，它允许我们在特定的事件发生时执行特定的代码。在这个示例中，点击内层 div 时，会先触发内层 div 的点击事件，然后触发外层 div 的点击事件（冒泡阶段）。在这个示例中，点击内层 div 时，会先触发外层 div 的点击事件，然后触发内层 div 的点击事件（捕获阶段）。事件对象包含有关事件的详细信息，如事件类型、目标元素、鼠标位置等。在这个示例中，点击内层 div 时，只会触发内层 div 的点击事件，不会触发外层 div 的点击事件。
js 监听监键盘动作
热门推荐
风过无声
01-19 6万+
转载自：http://geelong.javaeye.com/blog/810054
JS 事件监听 鼠标 键盘 表单 页面 onclick onkeydown onChange
HandsomeDanielWu的博客
07-27 219
JS 事件监听 鼠标 键盘 表单 页面 onclick onkeydown onChange
html监听，键盘事件
爱兰河少
07-25 2119
html监听，键盘事件
javascript 屏蔽鼠标键盘的几段代码
12-07
在JavaScript编程中，有时出于安全或者特定功能需求，开发者可能会选择屏蔽用户的某些操作，例如鼠标右键、快捷键等。上述代码就是一段用于屏蔽特定键盘和鼠标事件的JavaScript实现。以下将详细解释这段代码的工作...
js取消键盘监听_Javascript添加监听与删除监听用法详解
weixin_42347324的博客
12-31 1540
本文实例讲述了Javascript添加监听与删除监听的用法。分享给大家供大家参考。具体分析如下：js中事件监听就是利用addEventListener来绑定一个事件，这个用法在jquery中非常常用并且简单，但在原生js中比较复杂，这里整理了addEventListener事件各方法的测试与例子供大家参考学习。在前两天做播放器的时候添加监听后删除监听遇到了一点麻烦，删不掉，后来看了一下才发现，参数...
js监听鼠标点击和键盘点击事件并自动跳转页面
10-25
总结来说，通过本文，我们可以学习到如何在JavaScript中设置事件监听器，如何处理鼠标的点击事件和键盘的按键事件，以及如何利用这些事件实现页面跳转。此外，我们还了解到了一个实用的在线资源，可以用来查询和学习...
js判断是否按下了Shift键的方法
10-24
主要介绍了js判断是否按下了Shift键的方法,主要通过event.shiftKey方法来判断,需要的朋友可以参考下
原生js实现的日期时间插件鼠标点击文本框弹出日期时间表格选择日期效果源码.zip
11-22
原生js实现的日期时间插件鼠标点击文本框弹出日期时间表格选择日期效果源码.zip
flex中event.preventDefault()方法取消事件的默认行为
10-27
当点击datagrid的第一和第四项时，itemEdit事件将不起作用，许多事件都有默认执行的关联行为，接下来为大家详细介绍下，感兴趣的朋友可以参考下哈
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
12-13
在JavaScript中，事件（Events）是用户或浏览器与页面交互时触发的特定动作，比如点击按钮、按下键盘上的键或者移动鼠标。本文将详细介绍如何使用JavaScript处理HTML事件、键盘事件和鼠标事件。 ### HTML事件处理 ...
（12）HTML5-键盘按键事件监听
梧桐下的四叶草
09-01 9986
既然有鼠标事件，自然也有键盘按键事件可以使用了。在HTML5游戏中，键盘事件有许多重要的应用，例如调用快捷键功能，或是通过上下左右键（或wasd键）来控制游戏中角色的移动。常用的键盘按键事件包括：按下一个键（keydown），按住（keypress），放开（keyup）等。 {onKeyDown} 此事件可以检测玩家按下键盘上的某一个按键，并判断键值后做出相应的操作，此事件可用在,,,
JavaScript实现Shift+鼠标左键多选
狩猪逮兔的专栏
09-08 3808
.aspx代码: ================================================================================ http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit
Mac OSX 鼠标键盘事件的监听和模拟
auspark的专栏
10-26 3683
本文转自（调整了格式）：http://enkichen.com/2018/09/12/osx-mouse-keyboard-event/ 最近完成了 Mac OSX 平台下的远程控制功能，期间找了不少资料，这里做个总结，主要涉及到一下知识点： OSX 的事件机制 OSX/iOS 响应链者链 鼠标事件的监听及模拟（鼠标单击、双击、拖动、滚动等事件） 键盘事件的监听及模拟（包括组合键的模拟） Keycode 键盘编码（统一 Windows、OSX、浏览器端键盘按键的编码值） 事件分发机制 在 OS
JavaScript 鼠标事件监听&&触发时机&&触发顺序
jinse29的博客
04-25 7277
先说下触发时机和作用键（左键、右键）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

suwu150

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值