<!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>