最近看了Javascript高级教程中对过滤输入的介绍,想实现比如电话号码中不能包好非数值的字符,而相应文本中插入字符的操作是keypress事件,所以就想通过阻止这个事件的默认事件行为来阻止这个事件的默认行为来屏蔽此类字符,但是屏蔽之后所有的安检操作都会被屏蔽,文本框会变成可读的。如果只想屏蔽特定的字符,需要检测keypress事件对应的字符编码,然后决定如何响应。
下面是Js高级教程对三者的描述:
keydown:当用户按下键盘上的任意键时触发,如果按住不放的话,会重复触发此事件;
keypress:当用户按下键盘上的字符键时触发,如果按住不让的话,会重复触发此事件;
keyup:当用户释放键盘上的字符键时触发。
<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.
keydown、keypress、事件触发在文字还没敲进文本框,就像上面的keypress事件,只是按下字符键,显示的结果,即得到的是触发键盘事件前的文本。而keyup是事件触发整个键盘事件的操作已经完成,获得的是触发键盘事件后的文本。
keypress与keydown与keyup的主要区别:
(1)对中文输入法不友好,无法响应中文输入;
(2) 无法响应系统功能键(比如delete,backspace);
(3) 由于前面两个限制,keyCode与keydown和keyup不是很一致;
在keyup中无法是无法阻止浏览器的默认事件的,因为在keypress时,浏览器默认行为已经完成,即将输入文本框(尽管这时还没有显示),这个时候不管是preventDefault
还是return false,都不能阻止在文本框中输入文字的行为,如要阻止在文本框中输入文字,必须在keydown
或者keypress
时,即时阻止。