onkeyup onkeypress onkeydown 都可以设置，区别是什么？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>输入文本</title>
</head>
<body>
<p>字数限制在30字内，<span id="s">您还可以输入<b>30</b> 字</span></p>
<textarea cols="50" rows="7" id="text"></textarea>
<script type="text/javascript">
//补充代码
var a=document.getElementById("text");
var b=document.getElementById("s");
document.onkeydown=function(){
var l=a.value.length;
var t=30;
var d=t-l;
if(d>=0){
b.innerHTML="您还可以输入"+d+"字";
}else{
d=l-30;
b.innerHTML="已超出"+d+"字";
}
}
</script>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好。
1、区别：
onkeydown 是在用户按下但是没有放开任何键盘键（包括系统按钮，如箭头键和功能键）时发生。
onkeypress是在用户按下并放开任何字母数字键时发生。
onkeyup 是在用户放开任何先前按下的键盘键时发生。
例如：
<script>
var inps = document.getElementById('inps');
inps.onkeypress = function() {
console.log("onkeypress")
}
inps.onkeydown = function() {
console.log("onkeydown")
}
inps.onkeyup = function() {
console.log("onkeyup")
}
</script>效果图：
同学可以看一下console出来的内容，查看他们的区别，来加深印象哦。
2、代码修改：
在代码中使用的是onkeydown事件/onkeypress事件，onkeydown事件/onkeypress事件触发的时候，最开始获取的是还没有输入内容的input的长度，所以虽然在input里面写了一个值，但是它获取出来的内容长度还是0；当触发第二次的时候，input里面已经写了一个值，那么获取的是之前在input里面输入的内容的长度，所以每次输入的字符长度比显示的数字都是多一个数字，如下：
而onkeyup，触发了这个事件之后，它获取的长度就是在input里面输入的内容的长度，如下：
所以建议把事件替换成onkeyup，参考下图：
自己试一试哦，如果帮助到了你，欢迎采纳。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星