3-9 編程練習
小夥伴們，今天我們學習了onblur和onfocus這兩個鼠標事件，根據gif圖，補充代碼，實現下列功能：
（1） 當輸入框獲得焦點：
如果輸入框值爲空，提示“請輸入您的姓名”
（2） 當輸入框失去焦點：
如果輸入框值爲空，提示“用戶名不能爲空”，並且邊框顏色變爲紅色
如果輸入框值不爲空，那麼沒有提示文字，邊框顏色是默認顏色
任務
根據gif效果圖完成下列步驟：
第一步：通過元素名獲取dom對象的方式，得到輸入框對象以及放置提示文字的元素對象，並用變量進行接收
Tips：放置提示文字的元素可以放在一個行內元素中
第二步：給輸入框綁定獲得焦點事件，當輸入框獲得焦點時，判斷：
如果值爲空，輸入框後出現提示文字“請輸入您的姓名”
第三步：給輸入框綁定失去焦點事件，當輸入框獲得焦點時，判斷：
（1）如果值爲空，輸入框後出現提示文字“用戶名不能爲空”，並且將樣式表中的邊框樣式添加給輸入框
（2）如果值不爲空，輸入框後的提示文字消失，之前加上的樣式也要去掉
Tips：
（1） 在第三步的判斷中，如果值爲空，給輸入框加上顏色，那麼當我們輸入框獲取焦點時，要將邊框樣式恢復默認樣式
（2）用設置元素的class屬性這個方法給輸入框加樣式
參考答案：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>onblur和onfocus</title>
<style type="text/css">
.red{
border:1px solid red;
}
</style>
</head>
<body>
姓名：<input type="text"> <span></span>
<script type="text/javascript">
// 補充代碼
window.onload=function(){
var entry=document.getElementsByTagName("input")[0];
var prompt=document.getElementsByTagName("span")[0];
entry.onfocus=function(){
prompt.innerHTML="請輸入您的姓名";
entry.removeAttribute("class");
}
entry.onblur=function(){
if(entry.value===""){
entry.className="red";
prompt.innerHTML="用戶名不能爲空";
}
}
}
</script>
</body>
</html>