onkeydown 是键盘按键按下时触发
onkeypress 时键盘按键按住时触发
onkeyup 是键盘按键弹起时触发
下面请看以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" value="" id="t">
<script type="text/javascript">
var d = document.getElementById('t');//获取input标签
//当键盘按下时触发
d.onkeydown = function(){
console.log('onkeydown');
}
//当键盘按下时触发
d.onkeypress = function(){
console.log('onkeypress');
}
//当键盘弹起时触发 键盘弹起,才能确定最终输入的是什么
d.onkeyup = function(){
console.log('onkeyup');
console.log(d.value);
}
</script>
</body>
</html>
以上,我们给input标签绑定了onkeydown、onkeypress和onkeyup事件。
实验结果是:
当按下键盘按键时onkeydown事件会触发。
当一直按住键盘按键时,会连续触发onkeydown和onkeypress事件。
当松开键盘按键时onkeyup事件会触发。需要注意的是:只有当键盘按键弹起时才可以取得按键的内容。
大家可自行测试一下,以加深印象。
|