JS 事件(onkeyup、onkeydown、onkeypress、onchange),对文本的事件处理之小总结

本文总结了JavaScript中与键盘交互相关的四个事件:onkeydown(按键按下时触发),onkeyup(按键释放时触发),onkeypress(按键按下并释放时触发,但不适用于所有按键)以及onchange(内容改变且失去焦点时触发)。onkeyup适合用于字数统计场景,如招聘平台的自我介绍输入。onchange事件在文本域和文本框内容改变并失去焦点时才触发,常用于下拉框、文本框和文本域。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、事件的简单介绍

按键相关的:

onkeydown 当用户按下键盘按键时触发。 
onkeyup 当用户释放键盘按键时触发。 
onkeypress 当键盘按键被按下并释放一个键时发生。

其他:

onchange 当对象或选中区的内容改变时触发。

2、事件的详细介绍

onkeydown :当按键按下时,先触发事件发生,然后处理完后才会把按键对应的按键值显示在文本框中!监听一个用户是否按下按键请使用 onkeydown 事件,所有浏览器都支持 onkeydown 事件

代码解释如下:(第一次按键按下时会触发事件,即出现警示框,显示文本框长度为“0”,然后点击警示框确认后才会把对应的按键值显示在文本框中!)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				document.getElementById("textarea").onkeydown = function(){
					alert("文本框的长度:"+document.getElementById("textarea").value.length);
				}
			}
		</script>
	</head>
	<body>
		<form>
			<textarea id="textarea"></textarea>
		</form>
	</body>
</html>

onkeypress :所有情况与onkeydown事件相同!但是其特殊实用的地方很少,所以几乎可以使用onkeydown事件完全替代作用!!

注意: 在所有浏览器中 onkeypress 事件不是适用于所有按键(如: ALT, CTRL, SHIFT, ESC)。

代码解释如下:(现象与onkeydown事件一样,会先出现警示框,关闭警示框后才会把按键值显示在文本框中!)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				document.getElementById("textarea").onkeypress = function(){
					alert("文本框的长度:"+document.getElementById("textarea").value.length);
				}
			}
		</script>
	</head>
	<body>
		<form>
			<textarea id="textarea"></textarea>
		</form>
	</body>
</html>

onkeyup :当按键释放时会调用事件,但是调用事件之前已经把该按键值显示到了文本框中了。(用于统计文本框中的文本字数的时候应该使用onkeyup事件!例如:招聘平台上自我介绍的字数统计,“智联招聘->我的智联->工作经验->工作描述”就可以看到其用处!)

ps:这里的智联是本人觉得最贴切的例子,如有不对的地方可以联系我...

代码解释如下:(当按键释放时,文本框中已经把按键值显示在了其中,所以这个时候调用onkeyup事件显示的信息才是准确的!)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				document.getElementById("textarea").onkeyup = function(){
					alert("文本框的长度:"+document.getElementById("textarea").value.length);
				}
			}
		</script>
	</head>
	<body>
		<form>
			<textarea id="textarea"></textarea>
		</form>
	</body>
</html>

三个事件的联系:每当敲击一下键盘这三个事件会依次发生:onkeydown--onkeypress--onkeyup

onchange :当对象或选中区的内容改变时触发。其中当文本域和文本框中的文字内容在编辑状态的时候(文本域和文本框一直获取焦点)是不会触发onchange事件,只有文本内容改变后失去焦点时才会触发onchange事件。

常用的控件:下拉框(select)、文本框(text)、文本域(textarea)

注意:只有把值改变了以后失去焦点才会触发onchange事件,内容不变的情况是无论如何也不会触发onchange事件的!!

代码解释如下:(当焦点一直在文本域或文本框中则一直不会调用onchange事件,但一失去焦点就会触发事件!)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				document.getElementById("textarea").onchange = function(){
					alert("文本域的长度:"+document.getElementById("textarea").value.length);
				}
				document.getElementById("text").onchange = function(){
					alert("文本框的长度:"+document.getElementById("text").value.length);
				}
			}
		</script>
	</head>
	<body>
		<form>
			文本域:<textarea id="textarea"></textarea><br />
			文本框:<input type="text" id="text"/>
		</form>
	</body>
</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值