<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件类型(onfocus和onblur)</title>
<!--
onfocus;获得焦点时触发(例如:输入框获得光标时触发
onblur;失去焦点时触发(例如:输入框失去光标时触发
常用于表单
-->
<style>
#name,#hint{float: left; margin-top: 20px;}
</style>
<script>
window.onload=function (){
var use=document.getElementById("name");//获取用户名输入框
var hin=document.getElementById("hint");//获取提示
use.onfocus=function (){ //输入框获得光标时触发
hin.innerHTML="设置后不可更改,不少于4个字符,最多14个字符";
}
use.onblur=function (){ //输入框失去光标时触发
if (use.value.length<4 || use.value.length>14){ //输入的字符少于4或者大于14时
hin.innerHTML='<img src="../img/no.png" />';
}else{ //否则
hin.innerHTML='<img src="../img/yes.png" />';
}
}
}
</script>
</head>
<body>
<input id="name" type="text" placeholder="请输入用户名" />
<div id="hint"></div>
</body>
</html>