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. idea+maven+springmvc

    黑了Java这么多年, 今天为Java写一篇文章吧. 这篇文章主要是想帮助那些刚接触到Java, 同时想从事Java WEB GUI开发的人. 对我而言, 我很早就有想尝试用Java写WEB的想法, ...

  2. 玲珑杯 Round #18 A -- 计算几何你瞎暴力

    因为坐标都在1-10之间,因此可暴力求解 #include <iostream> #include <cstdio> #include <cstring> #inc ...

  3. Network Stack‎ : Disk Cache

    Disk Cache 目录 1 Overview 2 External Interface 3 Disk Structure 3.1 Cache Address 3.2 Index File Stru ...

  4. JavaScript笔记（6）

    一.Date Date实例用来处理日期和时间.Date对象基于1970年1月1日(格林威治时间)世界标准时间起经过的毫秒数.常用:new Date();new Date(value);new Date ...

  5. 学习推荐《零起点Python大数据与量化交易》中文PDF+源代码

    学习量化交易推荐学习国内关于Python大数据与量化交易的原创图书<零起点Python大数据与量化交易>. 配合zwPython开发平台和zwQuant开源量化软件学习,是一套完整的大数据 ...

  6. Mybatis mapper.xml文件头文件备份

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-/ ...

  7. javascript——对象

    分类 JavaScript对象分类: 内置对象:由ECMAScript规范定义的对象或类,例如:数组.函数.日期(Date()).正则表达式 宿主对象:是由js解释器所嵌入的宿主环境(比如Web浏览器 ...

  8. [Python] Understand Scope in Python

    Misunderstanding scope can cause problems in your application. Watch this lesson to learn how Python ...

  9. [Python] Format Strings in Python

    Single quotes and double quotes can both be used to declare strings in Python. You can even use trip ...

  10. jquery autocomplete文本自己主动补全

    文本自己主动补全功能确实非常有用. 先看下简单的效果:(样式不咋会写) 以下介绍几种: 1:jqery-actocomplete.js 这个网上有个写好的实例,上面挺具体的,能够下来执行下就清楚了就不 ...