onkeypress、onkeydown、onkeyup三事件的区别

onkeypress:能够产生该事件的字符为:
Letters: A - Z (uppercase and lowercase)
Numerals: 0 - 9
Symbols: ! @ # $ % ^ & * ( ) _ - + = < [ ] { } , . / ? \ | ' ` " ~
System: ESC, SPACEBAR, ENTER
如果是输入Ctrl+C、Delete之类的,就不会产生该事件。
特别注意:对于中文没有效果
获取所按的键ASCII码(即大小写字母有分),可使用event.keyCode,要转换也可以对event.keyCode进行操作。
事件产生时value还没有包含所输入的字符。
如果要取消输入,可以使用event.keyCode = 0,也可以使用event.returnValue = false。
想获取控制键的情况,则使用event.altKey、altLeft、ctrlKey、ctrlLeft、shiftKey、shiftLeft。
当按住键盘不放时,会持续产生该事件。

这样看来,它只能处理中规中矩的事情。如输入只能大写,输入只能数字(但粘贴功能还会破坏这些规则)。

onkeydown:任何按键都能产生该事件,
即使按一下Ctrl键,也是激发该事件
用输入法输入中文时,每输入一个编码都产生一个事件,多得让人受不了,并且获得到的keyCode却是229。
其获取的是键盘的扫描码(即大小写字母不分),可使用event.keyCode,但不能使用event.keyCode来修改。(但这又是个例外:if (event.keyCode === 13) event.keyCode = 9;)
事件产生时value还没有包含所输入的字符。
如果要取消输入,不能使用event.keyCode = 0这种方式,但可以使用event.returnValue = false。
当按住键盘不放时,会持续产生该事件。

onkeyup:任何按键都能产生该事件,
即使按一下Ctrl键,也是激发该事件
用输入法输入中文时,每输入一个编码都产生一个事件,虽然也没办法获取汉字,但keyCode还好是编码。
其获取的是键盘的扫描码(即大小写字母不分),可使用event.keyCode,但不能使用event.keyCode来修改。
事件产生时value已经包含所输入的字符了。
event.keyCode = 0 与 event.returnValue = false都不能取消该事件。
当按住键盘不放时,不会持续产生该事件。只有最后放开,才产生。

我的目的是限制用户输入的长度(特别是中文),看了这三个事件,都没有一个方便的家伙。

有一种观点:长度验证不必在输入时进行,只要在光标离开或提交时验证,其实这不是最理想的,试想一下,一个输入框,用户心血来潮地输入了一大堆东西,然后提交,这时系统才告诉他不能输入这么多,这是个糟糕的体验。

另外我也看到一种处理方法:在输入框的onkeypress、onkeyup、onblur、onchange事件中全部加上超长取消的处理。感觉太多了,只要onkeyup体现即时控制,onchange处理鼠标粘贴、拖入这两个动作就可以了。

再说一个onpropertychange,它本来是可以完成即时控制的,但我的代码运行后会让IE中止,原因不明。

最后附一个被说是漏洞的网页,它用到了上面说的三个事件
<HTML>
<HEAD>
<SCRIPT>
var saved;
var e ;
var mystring1 = "C:\\BOOT.INI";
var mystring2 = "c:\\boot.ini";
var i = mystring1.length - 1;
function doKeyPress ()
{
 e = window.event;
 saved = e.keyCode;
 if ((e.keyCode != mystring1.charCodeAt(i)) && (e.keyCode !=mystring2.charCodeAt(i)))
 {
  e.returnValue = false;
  e.cancelBubble = true;
 }
 else
 {
  i--;
 }
}

function doKeyUp ()
{
 document.forms[0].txt.value += String.fromCharCode(saved);
 document.forms[0].txt.focus();
 r = document.forms[0].txt.createTextRange();  
 r.moveStart("character", document.forms[0].txt.value.length);
 r.collapse(true);
 r.select();
}
</SCRIPT>
</HEAD>

<BODY>
 <FORM METHOD=POST action=file.php>
 <INPUT id="asdf" name="fileupload" TYPE="FILE" OnKeyUp="doKeyUp();" onKeyPress="doKeyPress
();"><br />
 把这一串用键盘输到下面的文本框中:别用拷贝粘贴<br />
 AIBNCID.ETFOGOHBE\D:EC<br />
 <input name="txt" id="txt" type="text" OnKeyDown="document.forms[0].fileupload.focus();">
</FORM>
</BODY>

</HTML>

原文地址:https://www.cnblogs.com/yzx99/p/1385981.html