最近看了Javascript高级教程中对过滤输入的介绍,想实现比如电话号码中不能包好非数值的字符,而相应文本中插入字符的操作是keypress事件,所以就想通过阻止这个事件的默认事件行为来阻止这个事件的默认行为来屏蔽此类字符,但是屏蔽之后所有的安检操作都会被屏蔽,文本框会变成可读的。如果只想屏蔽特定的字符,需要检测keypress事件对应的字符编码,然后决定如何响应。

但是我在利用keypree事件的时候,完全搞蒙了。因为前面看了keydown、keypress、keyup事件,它们到底怎么用呢?

下面是Js高级教程对三者的描述:
keydown:当用户按下键盘上的任意键时触发,如果按住不放的话,会重复触发此事件;
keypress:当用户按下键盘上的字符键时触发,如果按住不让的话,会重复触发此事件;
keyup:当用户释放键盘上的字符键时触发。

那么对应的keyCode(键码)和charCode(字符编码)是什么样子的呢?

  1. 在发生keydown和keyup事件时,event对象的keyCode属性会包含一个代码,与键盘上的一个特定的键对应。对数字字母键,keyCode属性的值与ASCII码中对应小写字母或者数字的编码相同,
  2. 发生keypress事件意味着按下的键会影响到屏幕中文本的显示。在所有的浏览器中,按下能够插入或者删除字符的键都会触发keypress事件。IE9,FireFox、Chrome和Safari的event对象都支持一个charCode属性,这个属性只有在发生keypress事件时,才包含值,而且这个值是按下的那个键所代表的字符的ASCII编码。此时的keyCode通常等于0或者也可能等于所按键的键码。

<input type="text" id="text1"/>
<script>var oTxt=document.getElementById("text1");oTxt.onkeyup=function getCharCode(){return false;if (typeof(event.CharCode)==="number"){alert(String.fromCharCode(event.charCode)) ;}else{alert(String.fromCharCode(event.keyCode));}};
</script>

比如上述的代码,按下a就会显示97,按下b会显示98.
alert(String.fromCharCode(event.keyCode));会将其转换成实际的字符,比如按下a则会显示a,按下B则会x显示b。String.fromCharCode():接收一个指定的unicode的值,返回一个字符串,该方法是String的静态方法,不能自己电定义。
而三者之间的区别如下:(这里借鉴了一下猫在前端路上的博客,结合上面的理解,可能会好一点):
(https://www.cnblogs.com/littlelan/archive/2013/03/28/2987851.html)

按下键盘会触发键盘事件,顺序依次为:keydown->keypress->keyup.

  1. keydown、keypress、事件触发在文字还没敲进文本框,就像上面的keypress事件,只是按下字符键,显示的结果,即得到的是触发键盘事件前的文本。而keyup是事件触发整个键盘事件的操作已经完成,获得的是触发键盘事件后的文本。

  2. keypress与keydown与keyup的主要区别:
    (1)对中文输入法不友好,无法响应中文输入;
    (2) 无法响应系统功能键(比如delete,backspace);
    (3) 由于前面两个限制,keyCode与keydown和keyup不是很一致;

  3. 在keyup中无法是无法阻止浏览器的默认事件的,因为在keypress时,浏览器默认行为已经完成,即将输入文本框(尽管这时还没有显示),这个时候不管是preventDefault还是return false,都不能阻止在文本框中输入文字的行为,如要阻止在文本框中输入文字,必须在keydown或者keypress时,即时阻止。

keydown,keypress,keyup三者之间的区别:相关推荐

  1. 键盘事件keypress 和 keydown、keyup 的用法与区别

    KeyDown:用户摁下摁键时发生 KeyPress:用户摁下摁键,并且产生一个字符时发生 KeyUp: 用户释放某一个摁键时触发 定义和用法 完整的 keypress 过程分为两个部分:1. 按键被 ...

  2. [转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别

    要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM ...

  3. TCP三次握手、四次挥手、socket,tcp,http三者之间的区别和原理

    接着上一篇文章叙述: TCP/IP连接(在互联网的通信中,永远是客户端主动连接到服务端): 手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过无线网络建立TCP连接.TCP协 ...

  4. String String.valueof() toString三者之间的区别~

    String  String.valueof()  toString三者之间的区别~ (String )强制类型转换,使用这种方法时,需要注意的是类型必须能转成String类型.因此最好用instan ...

  5. String StringBuilder StringBuffer三者之间的区别~~~

    String StringBuilder  StringBuffer三者之间的区别~~~ String是字符串常量,它是典型的immutable类,被声明final class,所有的属性都是fina ...

  6. Python id(obj), ==, is 三者之间的区别

    不多说,直接上代码,看看三者的区别吧. 代码: # 例子 a = [1, 2, 3] b=a; print(a) print(b) print(a is b) print(b is a) print( ...

  7. .NET、C#和ASP.NET三者之间的区别与联系

    .NET.C#和ASP.NET三者之间的区别与联系 1..net(dot net) .net是一个平台,抽象的平台概念. 实现形式是库:①定义了基本的类型(通用类型系统CTS,common type ...

  8. 【待续】C#.Net 关键词清理 Fields Property Attribute Const三者之间的区别与联系

    C#.Net 关键词清理 Fields Property Attribute 三者之间的区别与联系 不少人一直对这三个词容易混淆视听,不知道他们之间到底什么联系. 这可能跟翻译的中文有很大的关系. 首 ...

  9. 光端机、光纤收发器与光猫三者之间的区别介绍

    现如今,在当下的网络通信项目中,光端机.光纤收发器.光猫这几款产品可以说是应用非常广泛,也是备受安防人的推崇,那么,对于这三者之间的区别你是否清楚呢?接下来就由飞畅科技的小编来为大家详细介绍下光端机. ...

最新文章

  1. linux下杀死进程的10种方法
  2. Grafana 6.4 正式发布!
  3. Php魔术函数学习与应用 __construct() __destruct() __get()等
  4. Linux 技术篇-使用vim命令创建、编辑文件内容实例演示,linux修改文档方法
  5. Java调用Matlab
  6. 图像识别DM8127开发攻略——开发环境搭建
  7. vue-cli安装教程
  8. linux删除mysql临时文件_linux下mysql自动备份数据库与自动删除临时文件_MySQL
  9. “烟花”来势汹汹!用数据可视化告诉你:台风最爱在哪登陆?
  10. python安装第三方扩展包_Python之安装第三方扩展库
  11. JAMA:Java矩阵包
  12. 考研编程练习---StringMatching(后缀表达式)
  13. 一法通 万法通 (清)吴獬 著
  14. redis的持久化机制详解
  15. 统计表格中相同数据的出现个数
  16. mac开机启动mysql_mac 设置mysql开机自启动
  17. Docker容器获取局域网ip(使用macvlan)
  18. 打印标签时如何解决打印偏移
  19. opensearch 使用
  20. Java之日期与时间

热门文章

  1. 语言信号处理 总复习 第三讲 *秋昊
  2. 微服务架构-高性能Netty服务器-064:Netty实战与反序列化与序列化协议
  3. 哥德尔预言无穷小微积分是未来的数学分析
  4. paper:DeepAR: Probabilistic forecasting with autoregressive recurrent networks DeepAR模型
  5. 许昌学院校园网服务大厅模拟登录
  6. Python正则表达式(regular expression)简介-re模块
  7. 那些让面试官直呼内行的Java知识点(二)
  8. Windows CE 6.0完整版免费下载 下载地址
  9. 机场文员面试从何下手
  10. 对展开运算符和object.assign()的理解