onkeypress、onkeydown、onkeyup三事件的区别
2009-02-07 18:59
447 查看
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>
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- input text控件的onkeydown、onKeyPress、onkeyup事件的区别
- input输入框使用onkeypress实现回车启动按钮事件，另注：onkeypress、onkeyup与onkeydown的区别
- onkeypress,onkeyup,onkeydown的区别
- onkeypress 、onkeyup 与onkeydown三者之间的区别
- JS 事件（onkeyup、onkeydown、onkeypress、onchange），对文本的事件处理之小总结
- web前端 -- onkeydown、onkeypress、onkeyup、onblur、onchange、oninput、onpropertychange的区别
- onkeydown、onkeypress、onkeyup、onblur、onchange、oninput、onpropertychange的区别
- onkeydown和onkeyup按键回车触发事件的区别
- js中的键盘事件：onkeydown、onkeypress、onkeyup
- onkeypress,onkeydown,onkeyup区别
- onkeyup，onkeydown和onkeypress的区别介绍
- onkeyup，onkeydown和onkeypress的区别介绍
- onkeypress事件.onkeydown事件.onkeyup事件
- 浅析OnKeyPress事件和OnKeyDown、OnKeyUp事件
- onkeyup，onkeydown和onkeypress的区别介绍
- onkeyup,onkeydown,onkeypress事件
- JS之onkeypress,onkeydown,onkeyup区别
- onkeypress事件.onkeydown事件.onkeyup事件
- onkeyup，onkeydown，onkeypress的区别
- onkeyup，onkeydown和onkeypress的区别介绍