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. 使用iVMS-4200 存储录像数据时的设置

    1.安装软件时,选择:存储服务器 2.对存储服务器进行配置,具体配置见 配置手册.

  2. 【js基础】判断是否是合法邮箱地址（正则表达式的应用）

    2019-01-21 09:11:21 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  3. java web应用调用python深度学习训练的模型

    之前参见了中国软件杯大赛,在大赛中用到了深度学习的相关算法,也训练了一些简单的模型.项目线上平台是用java编写的web应用程序,而深度学习使用的是python语言,这就涉及到了在java代码中调用p ...

  4. 11/1 NOIP 模拟赛

    11.1 NOIP 模拟赛 期望得分:50:实际得分:50: 思路:暴力枚举 + 快速幂 #include <algorithm> #include <cstring> #in ...

  5. EditPlus 使用技巧以及快捷键

    一边阅读,一边动手吧! 为了达到更好的效果,请你先下载我打包的这个 EditPlus压缩包文件(压缩包文件为绿色的EditPlus2.31英文版,含自动完成文件,高亮语法文件和剪切板代码片断文件,这些 ...

  6. jQuery对表格进行类样式

    <%-- <%@ page language="java" contentType="text/html; charset=utf-8" pageE ...

  7. 关于obj.currentStyle.property、window.getComputedStyle(obj,null).property、obj.style.property的理解

    首先是obj,style.property 我一直用这个obj.style.property这个属性来修改内联和外联的obj属性,但是从网上看到了obj.style.property居然只能读取内嵌的 ...

  8. Spark MLlib回归算法LinearRegression

    算法说明 线性回归是利用称为线性回归方程的函数对一个或多个自变量和因变量之间关系进行建模的一种回归分析方法,只有一个自变量的情况称为简单回归,大于一个自变量情况的叫做多元回归,在实际情况中大多数都是多 ...

  9. JQ 实施编辑 （clone()复制行||双击编辑）

    //代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  10. VS Code 关于SFTP上传文件到多服务器的配置

    工欲善其事,必先利其器! 刚学前端的时候一直用的DW来编写代码,其功能非常强大,但在Linux下不能用,所以就转VS Code了. 但是刚开始使用VS Code的时候,很多DW上的功能需要自己安装扩展 ...