JavaScript中的表单中onblure失去焦点事件

最新推荐文章于 2024-02-16 17:42:45 发布

IT-Xu_LongTeng

最新推荐文章于 2024-02-16 17:42:45 发布

阅读量1.1k

点赞数

文章标签： JavaScript 事件

本文链接：https://blog.csdn.net/weixin_44269204/article/details/89371650

版权

事件的语法结构

事件目标 .事件类型=事件处理程序

window.function(){
				// alert('加载事件的处理程序');
				}

window 是事件的目标事件的类型是load =加function()后面是事件的处理程序
2.onblure 失去焦点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>			
		</style>		
		<script type="text/javascript">
			window.function(){
				var Txt=document.getElementById('txt');
				var span_content=document.getElementById('span_01');
				//onblur 在对象失去焦点时候发生的事件
				Txt.function(){
					//alert('===');
					 Txt_content=Txt.value;
					if(Txt_content=='admin'){
						//alert('输入的账户正确！');
						span_content.innerHTML='';
						
					}
					else{
						//alert('账户错误，请重新输入！');						
						span_content.innerHTML='输入的账户错误，请重新输入！';
						span_content.style.color='red';
					}
				}
				
				var Pwd=document.getElementById('pwd');
				var span_pwd=document.getElementById('span_02');
				Pwd.function(){
					 Pwd_Content=parseFloat(Pwd.value); 
					if(Pwd_Content==888888){						
						span_pwd.innerHTML='';
					}
					//防止和上一个框出现空白的出现提示
					else if(Txt_content!='admin'){
						span_pwd.innerHTML='';
					}				
					else{					
						span_pwd.innerHTML='输入的密码错误，请重新输入！';
						span_pwd.style.color='red';
					}
				}
				var Sub=document.getElementById('sub');
				Sub.function(){
					if(Txt_content=='admin'&&Pwd_Content==888888){
						alert('登录成功！')
					}
				}
			}	
		</script>
	</head>
	<body>
		输入账号：<input type="text" id="txt" />
				 <span id="span_01"></span><br />		
		密码：<input type="password" id="pwd" />	
				<span id="span_02"></span><br />
			  <input type="submit" value="登录"  id="sub"/>
		
</body>
</html>

IT-Xu_LongTeng

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的表单中onblure失去焦点事件

事件的语法结构事件目标 .事件类型=事件处理程序window.function(){ // alert('加载事件的处理程序'); }window 是事件的目标事件的类型是load =加function()后面是事件的处理程序2.onblure 失去焦点<!DOCTYPE html><html> <head> &...
复制链接

扫一扫