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. 阿里&163 yum源

    站点:https://opsx.alibaba.com/mirror #阿里云base cat /etc/yum.repos.d/alibase.repo [rhel7] name=ali-base ...

  2. Comput_picture

    import requestsfrom pyquery import PyQuerycount = 1url = "https://www.169tp.com/diannaobizhi/&q ...

  3. Spring MVC原理及实例基础扫盲篇

    近期 项目中刚接触了SpringMVC,就把这几天看的跟实践的东西写出来吧. 一.首先,先来了解一下SpringMVC究竟是个什么样的框架? Spring Web MVC是一种基于Java的实现了We ...

  4. startActivity-两种start 方式

    对于activity的启动有两种方式 1.startActivity-这种方式比较简单,我们就不做讲解了 2.startActivityForResult-这种启动方式可以实现父子activity双向 ...

  5. 30.IntellJ Idea 导入已存在的Maven项目

    转自:https://blog.csdn.net/epdc2/article/details/53767386

  6. CSS盒子模型图

    下面这张图,是W3C标准的CSS盒子模型: 由上图可以清楚的看出各个部分的CSS属性.

  7. pipPython运维日记

    一 Python 工作环境管理 1.1 使用 pyenv 管理不同的Python 版本 克隆项目安装 git clone https://github.com/yyuu/pyenv.git ~/.py ...

  8. POJ 2374 线段树建图+Dijkstra

    题意: 思路: 线段树+Dijkstra(要堆优化的) 线段树要支持打标记 一个栅栏 拆成两个点 :左和右 新加一个栅栏的时候 看看左端点有没有被覆盖过 如果有的话 就分别从覆盖的那条线段的左右向当前 ...

  9. 认知 Git 和 GitHub

    今天被一个大牛的大哥问了个问题,问住了.原问题是“你是到github吗?git呢?” 我堂而皇之的说,“他们不是同一个吗?” 结果大牛大哥狠狠地回了我一句“百度去”..好吧我乖乖去百度了. 这是我百度 ...

  10. Sparse Autoencoder（二）

    Gradient checking and advanced optimization In this section, we describe a method for numerically ch ...