以用戶名和密碼的效果爲實例
<!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>