onkeyup和onkeypress的区别

onkeyup和onkeypress的区别

<!DOCTYPE html>
<html>
    <head lang="en">
	    <meta charset="UTF-8">
	    <title>输入文本</title>
	</head>
	<body>
		<p>字数限制在30字内,<span>您还可以输入<b>30</b> 字</span></p>
		<textarea cols="50"  rows="7"  id="text"></textarea>
		<script type="text/javascript">
			//补充代码
			var text = document.getElementById("text");
			var span = document.getElementsByTagName("span")[0];
			
			text.onkeyup = function(){
			    var all = 30;
			    var len = text.value.length; 
			    var n = all - len;
			    
			    if(n<0){
			        span.innerHTML = "已超出<b>" + (-n) + "</b>字";
			    }else{
			        span.innerHTML = "您还可以输入<b>" + n + "</b>字";
			    }
			}  
			
// 			text.onkeypress = function(){
// 			    var all = 30;
// 			    var len = text.value.length; 
// 			    var n = all - len - 1;
			    
// 			    if(n<0){
// 			        span.innerHTML = "已超出<b>" + (-n) + "</b>字";
// 			    }else{
// 			        span.innerHTML = "您还可以输入<b>" + n + "</b>字";
// 			    }
// 			}
			
		</script>
	</body>
</html>

为什么这里的onkeyup和onkeypress得到的效果不一样,按下两个键之后剩余可输入字数onkeyup是28,onkeypress是29。

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2022-01-03 10:01:34

同学你好,代码效果实现是对的,针对你的问题解答如下:

1、两者的区别如下:onkeyup是键盘抬起时触发, onkeypress是在按下并释放某个键盘时触发(一般只能监听到数字和字母键,无法监听到系统按键,如:删除键)

2、因为在输入框中输入内容,按下键盘并松开,触发onkeypress事件时,此时还没来得及将值写入textarea文本框,所以一开始获取到的输入框的值为空,即:每次获取到的都是上一次输入框中的值,可以通过consolg.log输出语句,在控制台中查看下输出效果,帮助自己更好的理解,如下:

https://img1.sycdn.imooc.com//climg/61d258af0969cbc911920660.jpg

https://img1.sycdn.imooc.com//climg/61d258e609664f1d26441410.jpg

祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师