input文字框焦點背景變色

admin發表於2019-01-03

很多網頁表單設計中，當文字框獲得焦點的時候會改變它的樣式屬性，可以提高文字框的辨識度。

下面以設定背景色為例子，對此功能做一下簡單介紹。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
.bg{background-color:red;}
</style>
<script>  
window.onload=function(){  
  var inputs=document.getElementsByTagName("input");
  for(var i=0;i<inputs.length;i++){
    inputs[i].onfocus = function (){
      this.className="bg";
     }
     inputs[i].onblur=function(){
       this.className="";
     }
  }
}  
</script>  
</head>  
<body>  
<form id="myform" action="#">  
<ul>  
  <li>使用者名稱:<input type="text" name="username" /></li>  
  <li>密碼：<input type="text" name="pw" /></li>  
</ul>  
</form>  
</body>  
</html>

當文字框獲取焦點的時候，能夠改變它的背景，當失去焦點的時候會還原。

相關閱讀：

（1）.getElementsByTagName()參閱getElementsByTagName()一章節。 

（2）.focus事件參閱JavaScript focus 事件一章節。

（3）.blur事件參閱JavaScript blur 事件一章節。 

（4）.className屬性參閱JavaScript className一章節。

相關文章