以用户名和密码的效果为实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//获取焦点事件
function myFocus(){
}
//失去焦点事件
function myBlur(){
var cont = document.getElementById("cont");
var str = cont.value;
var f = document.getElementById("f");
if(str == "tom"){
f.color = "red";
f.innerHTML = "这个名字太抢手了，再换一个！";
}else{
f.color = "green";
f.innerHTML = "√";
}
}
//密码输入效果
//获取焦点
function pwdFocus(){
document.getElementById("img").src = "img/pwd-input.jpg";
}
//失去焦点
function pwdBlur(){
document.getElementById("img").src = "img/user-input.jpg";
}
</script>
</head>
<body>
用户名：<input id="cont" type="text" onfocus="myFocus()" onblur="myBlur()" /><br />
密码：<input id="pwd" type="password" onfocus="pwdFocus()" onblur="pwdBlur()" />
<font id="f" ></font>
<img id="img" src="img/user-input.jpg" />
</body>
</html>