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. OpenCV中数据转换

    在OpenCV中Mat.CvMat和IplImage类型都可以代表和显示图像.IplImage由CvMat派生,而CvMat由CvArr派生即CvArr -> CvMat -> IplIm ...

  2. Alisha's Party

    Alisha’s Party Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid ...

  3. linux下pptp配置步骤

    最近买了个VPS,于是随手搭了个VPN玩,ubuntu安装pptp太蠢了,直接apt-install pptp就行了 1./etc/pptpd.conf 注销最后两行,就是设置IP转发的范围,给那么几 ...

  4. Hexo 自动同步

    灵感 最近认证阿里云学生用户,参与ESC服务器9.9元/月的活动,准备先搭建一个博客网站,写写自已的心得以及经验.之前也搭建过网站,最后由于个人没时间(没时间是假的,就是懒.哈哈)的原因导致最后服务器 ...

  5. 通用查询实现方案(可用于DDD)[附源码] -- 简介

    原文:通用查询实现方案(可用于DDD)[附源码] -- 简介 [声明] 写作不易,转载请注明出处(http://www.cnblogs.com/wiseant/p/3985353.html).   [ ...

  6. 03014_properties配置文件

    1.使用properties配置文件 (1)开发中获得连接的4个参数(驱动.URL.用户名.密码)通常都存在配置文件中,方便后期维护,程序如果需要更换数据库,只需要修改配置文件即可: (2)通常情况下 ...

  7. List与array的相互转换

    1.List->Array 调用List的toArray方法 List<String> list = new ArrayList<String>(); list.add( ...

  8. js插件---Amaze UI dialog如何使用

    js插件---Amaze UI dialog如何使用 一.总结 一句话总结:别人给你列出来的参考手册照着用先 1.在哪里去找插件参考资料或者使用手册(一般位置找不到的时候)? github上面啊,非常 ...

  9. Mahout的推荐系统

    Mahout的推荐系统 什么是推荐系统 为什使用推荐系统 推荐系统中的算法 什么是推荐系统 为什么使用推荐系统? 促进厂商商品销售,帮助用户找到想要的商品 推荐系统无处不在,体现在生活的各个方面 图书 ...

  10. ssm框架的总结

    ssm对应的是spring+springmvc+mybatis, 一.spring,略. 二.spring mvc是spring提供的mvc模块, 从图中可以看出,springmvc的模块划分非常多, ...