为什么object.onkeyup=function(){}函数无法执行？

最新推荐文章于 2022-03-28 21:41:39 发布

原创最新推荐文章于 2022-03-28 21:41:39 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #onkeyup

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的密码强度检测程序，使用JavaScript实现。通过分析密码组成来评估强度，并通过不同颜色的提示展示结果。文章探讨了代码执行顺序对事件监听器的影响。

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

今天照着网上的《四级密码强度校验》视频写了一个相同的代码，主要作用就是在输入密码后js执行了一个方法，最终返回输入密码的强度等级。代码是这样的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<style type="text/css">
			#tips{
				float:left;
				margin:2px 0px 0px 20px;
				color:#fff;
				overflow:hidden;
				background:#ccc;
			}
			span{
				float:left;
				width:50px;
				height:20px;
				text-align:center;
				line-height:20px;
				margin-right:2px;
			}
			#tips .s1{
				background:red;
			}
			#tips .s2{
				background:green;
			}
			#tips .s3{
				background:yellow;
			}
			#tips .s4{
				background:silver;
			}
		</style>
		<script type="text/javascript">
		
			var password=document.getElementById("pwd");

			password.onkeyup = function(){
				//var index = checkPassWord(this.value);
				alert(2);
			}
		
			
			function checkPassWord(value){
				var modes=0;
				if(value.length<6){
					
					return modes;
				}
				if(/\d/.test(value)){
					//如果密码包含了数字
					modes++;
				}
				if(/[a-z]/.test(value)){
					//如果密码包含了小写的英文字母a-z
					modes++;
				}
				if(/[A-Z]/.test(value)){
					//如果包含了大写的英文字母A-Z
					modes++;
				}
				if(/\W/.test(value)){
					//如果非数字，字母，下划线
					modes++;
				}
				
				return modes;
			}
		</script>
	</head>
	<body>
		<input type="text" id="pwd" maxlength="16" value=""/>
		<div id="tips">
			<span class="s1">弱</span>
			<span class="s2">中</span>
			<span class="s3">强</span>
			<span class="s4">很强</span>
		</div>
	</body>
	
</html>

以上代码处于未完成的调试状态。请注意script代码段的前四行代码，作用是找到id为pwd的元素，也就是那个input=text的元素，当在输入框输入字母后抬起键盘的那一刻，执行alert()函数，问题来了，一直都不会输出，也就是说如果onkeyup函数里的代码不执行的话这个密码校验功能也无法完成了。我看了看源码，发现作者把script代码块写在了<body>元素的后面，难道这有什么玄机？

结果我把代码也剪切倒了body元素后面，神奇的事情发生了，能成功执行 alert（）方法了。。。

我思考了下，可能是因为整个html文件加载的顺序是从上到下的，在加载到script文件时还没有password这个元素，所以他的oneyup函数自然也执行不了。但是我在var password=document.....这行代码下面加了alert(1);，发现可以正常打印，那为什么到password.onkeyup这里的代码缺执行不了呢。。

在script代码块位于input前的情况下，我加了一行window.onload=function(){}，然后把原来前五行的代码剪切到function的方法体里，那么onkeyup函数能够正常执行。

暂时写到这里，这里遇到的问题先记录一下，最后附上这个校验密码强度的完整代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> 密码强度检测 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
	input{float: left; font-size: 14px; width: 250px; height: 25px; border: 1px solid #ccc; padding-left: 10px;}
	#tips{float: left; font-size: 12px; width: 400px; height: 25px; margin: 4px 0 0 20px;}
	#tips span{float: left; width: 40px; height: 20px; color: #fff; overflow:hidden; margin-right: 10px; background: #D7D9DD; line-height:20px; text-align: center; }
	#tips .s1{background: #F45A68;}/*红色*/
	#tips .s2{background: #fc0;}/*橙色*/
	#tips .s3{background: #cc0;}/*黄色*/
	#tips .s4{background: #14B12F;}/*绿色*/
  </style>
 </head>
 <body>
  <input type="text" id="password" value="" maxlength="16" />
  <div id="tips">
	<span>弱</span>
	<span>中</span>
	<span>强</span> 
	<span>很强</span>
  </div>
</body>
  <script type="text/javascript">
	var password = document.getElementById("password"); //获取文本框的对象
    //var value = password.value; //获取用户在文本框里面填写的值
	//获取所有的span标签 返回值是一个数组
	var spanDoms = document.getElementsByTagName("span");
	
	password.onkeyup = function(){
		//获取用户输入的密码,然后判断其强度 返回0 或者 1 2 3 4
		var index = checkPassWord(this.value);
		for(var i = 0; i <spanDoms.length; i++){
			spanDoms[i].className = "";//清空span标签所有的class样式
			if(index){//0 代表false 其余代表true
				spanDoms[index-1].className = "s" + index ;
			}
		}
	}
	
	//校验密码强度
	function checkPassWord(value){
		// 0： 表示第一个级别  1：表示第二个级别  2：表示第三个级别
		// 3： 表示第四个级别  4：表示第五个级别
        var modes = 0;		
		if(value.length < 6){//最初级别
			return modes;
		}
		
		if(/\d/.test(value)){//如果用户输入的密码 包含了数字
			modes++;
		}
		
		if(/[a-z]/.test(value)){//如果用户输入的密码 包含了小写的a到z
			modes++;
		}
		
		if(/[A-Z]/.test(value)){//如果用户输入的密码 包含了大写的A到Z
			modes++;
		}
		
		if(/\W/.test(value)){//如果是非数字 字母 下划线
			modes++;
		}
		
		switch(modes){
			case 1 : 
				return 1;
				break;
			case 2 :
				return 2;
				break;
			case 3 :
				return 3;
				break;
			case 4 :
				return 4;
				break;
		}
		
	}
  </script>
</html>