Js和jq事件—键盘事件KeyboardEvent

键盘事件keydown，keypress和keyup，还需要涉及到一个文本事件textInput。

keydown，keypress和keyup事件在js和jq中都支持。但是你想要触发这三个事件，必须有文本输入操作（该元素是，或者包含的子元素是文本输入元素—通过冒泡触发）。

三个事件的触发顺序是按下键盘会触发keydown，keypress，如果按着键盘不放则会反复触发这两个事件，当放开键盘的时候触发keyup。对于键盘上每个按键，这三个事件都是单独存在的，都需要一个keyup来结束这系列事件。

关于ctrl键，shift键，alt键，meta键，在键盘事件中也有对应的altKey, ctrlKey, metaKey, shiftKey。它们按下时不会触发keypress事件，每一次按下（不管按多久）放开，都只会触发一次keydown一次keyup。它们的按键名称分别是

　　Shift-Process(谷歌中keydown时显示)/Shift，Ctrol—Control/Control，Alt—Alt/Alt。

使用监听器绑定，关注事件中包含的属性如下：

　　key是指按键名称，如a,b,c,d,e

　　keyCode是指按键码，在keyup和keydown阶段显示的是按键码a-65,b-66....，在keypress阶段谷歌会显示ascii码，火狐为0

　　charCode是指字符码，在keyup和keydown阶段显示的是0，在keypress阶段会显示ascii码

　　which在keyup和keydown阶段显示的是按键码a-65,b-66....，在keypress阶段会显示ascii码

　　altKey, ctrlKey, metaKey, shiftKey

<!DOCTYPE html>

<html lang="zh-cn">

    <head>

        <meta charset="UTF-8"/>

        <script src='js/jquery-3.3.1.min.js'></script>

        <style>

        </style>

    </head>

    <body>

        <input type='text' id="c1"></input>

        <input type='text' id="c2"></input>

        <script type="text/javascript">

            //********显示事件的内容

            function showit(e){

                var e = e||window.event||event;

                //console.log(e);

                console.log(e.type);

                console.log(e.key);//按键a，b

                console.log(e.keyCode);//在keyup和keydown阶段显示的是按键码a-65,b-66....，在keypress阶段谷歌会显示ascii码，火狐为0

                console.log(e.charCode);//在keyup和keydown阶段显示的是0，在keypress阶段会显示ascii码

                console.log(e.which);//在keyup和keydown阶段显示的是按键码a-65,b-66....，在keypress阶段会显示ascii码

            }

            //********js

            document.getElementById('c1').onkeypress=showit;

            document.getElementById('c1').addEventListener('keyup',showit);

            document.getElementById('c1').addEventListener('keydown',showit);

            //*********jquery

            $('#c2').keypress(showit);

            $('#c2').on('keydown',showit);

            $('#c2').keyup(showit);

        </script>

    </body>

</html>

textInput事件（DOM3事件）

　　用户在可编辑区域中输入字符时，就会触发这个事件。

　　textInput用来代替keypress，二者区别：

　　　　任何可以获得焦点的元素都可以触发keypress事件，但只有可编辑区域才能触发textInput事件。

　　　　textInput事件只会在用户按下能够输入实际字符的键时才会触发，而keypress事件则在按下那些能够影响文本显示的键时也会触发（比如退格键）。

　　data属性

　　　　textInput事件主要考虑的是字符，因此它的event对象中还包含一个data属性，data值为用户输入的字符。

　　用户按下S键，data值就是“s”

　　用户按下上档键时按下S键，data值就是"S"

EventUtil.addHandler(textbox,"textInput",function(event){

    event=EventUtil.getEvent(event);

    console.log(event.data);

});

inputMethod属性

　　另外，event对象上还有一个属性，叫inputMethod，表示文本输入到文本框中的方式。使用这个属性可以确定文本是如何输入到控件中，从而验证其有效性。

　　　　0，表示浏览器不确定是怎么输入的

　　　　1，表示是使用键盘输入的

　　　　2，表示文本是粘贴进来的

　　　　3，表示文本是拖放进来的

　　　　4，表示文本是使用IME输入的

　　　　5，表示文本是通过在表单中选择某一项输入的

　　　　6，表示文本是通过手写输入的（比如使用手写笔）

　　　　7，表示文本是通过语音输入的

　　　　8，表示文本是通过集中方法组合输入的

　　　　9，表示文本是通过脚本输入的

兼容性：支持textInput属性的浏览器有IE9+，Safari和Chrome，只有IE支持inputMethod属性。

参考：

http://www.jxbh.cn/article/1847.html

https://www.cnblogs.com/starof/p/6558581.html

Javascript和jquery事件--键盘事件KeyboardEvent的更多相关文章

  1. lufylegend库 鼠标事件 循环事件 键盘事件

    lufylegend库 鼠标事件 循环事件 键盘事件 <!DOCTYPE html> <html lang="en"> <head> <m ...

  2. 使用jquery模拟键盘事件，但window系统并不会真的响应事件，只是浏览器当前页面会响应而已

    <!DOCTYPE html> <html> <head> <title>Demo</title> <meta http-equiv= ...

  3. day53 鼠标事件 键盘事件 及JQuery

    复习 // 语法: ECMAScript 操作: DOM BOM // 1.类型转化 // 转数字: +"3.14" | parseInt("123abc") ...

  4. jQuery学习-键盘事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器

    有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: Ja ...

  6. javascript和jquery 移除事件 和 改变样式

    javascript移除事件: document.getElementById("word").onmouseover = null; javascript改变样式: docume ...

  7. python学习之鼠标事件&键盘事件

    driver.maximize_window()   浏览器最大化 ActionChains类与输入事件 1:from selenium.webdriver.common.action_chains ...

  8. javascript和jquery 获取触发事件的元素

    一个很简单的问题,却因为大意,经常忘了处理,导致程序运行出错. <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  9. jQuery监控键盘事件

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. Node测试文章收藏

    1.Nodejs实战—测试Node程序 讲解了TDD与BDD,TDD的基本原则,单元测试常用框架及使用,例如assert断言库,  chai断言库,  should.js断言库,断言库搭配测试框架(m ...

  2. Python!Are you kidding me?

    前几天由于python给我带来了兴奋写了一篇文章叫做<The beauty of python 1>,今天则是由于一个小错误而写下此文. 也是缘因为我的工作,问题是这种: 我有一个文档.里 ...

  3. BZOJ 2708 [Violet 1]木偶 DP

    题意:id=2708">链接 方法: DP 解析: 这题太神辣. 做梦都没想到DP啊,反正我不会. 先谈一个我有过的错的想法. 最小费用最大流? 能匹配的边连费用为1的,不能匹配的连费 ...

  4. json和XML

    发请求(url) 1.client  ---------------->服务端                发送数据(Json/xml)                      < - ...

  5. .Net写的比较清晰的接口

    尼玛,隔行如隔山. .Net真操蛋. /// <summary> /// 加入群 /// </summary> /// <returns></returns& ...

  6. Impala管理

    这里, 以后更新. Impala的安装(含使用CM安装 和 手动安装)(图文详解) 可以通过下面的链接来访问Impala的监护管理页面: • 查看StateStore – http://node1:2 ...

  7. Android ijkplayer详解使用教程

    1.认识ijkplayer 最近公司准备开发一款视频播放及直播的应用,找了许多开源的框架,大部分都是基于ffmpeg开发的.最开始准备用Vitamio框架开发的,相关的文章也比较丰富,结果对于非个人移 ...

  8. VMware Vsphere 6.0安装部署 Vsphere ESXi安装

    Vsphere ESXi安装 ESXi作为虚拟化环境的Hypervisor层,负责将服务器虚拟成资源池,提供接口供管理组件调用,将下面的iso刻录成光盘或可启动U盘,安装在服务器裸机上: 下载地址请见 ...

  9. python +uiautomator 安卓UI控件操作

    一.搭建环境 准备:win7.JDK.androidSDK(adt-bundle-windows-x86_64-20140702\sdk).Appium.安卓模拟器(真机也可以),可以到这个地址下载h ...

  10. 一个Web报表项目的性能分析和优化实践(七)：性能监测工具JavaMelody

    简介 JavaMelody 能够监测Java或Java EE应用程序服务器,并以图表的方式显示:Java内存和Java CPU使用情况,用户Session数量,JDBC连接数,和http请求.sql请 ...