keydown,keypress,keyup三者之间的区别:

最近看了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时,即时阻止。

  • 7
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值