javascript當文字框獲得焦點設定邊框

admin發表於2017-03-09
JavaScript

本章節介紹一下當文字框獲得焦點以後如何設定文字框的邊框樣式，本來是一個非常簡單的問題，但是有可能前臺美工人員對javascript並不是太瞭解，所以還是通過一個簡單的例項介紹一下，以便需要的朋友進行擴充套件。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<head>
<title>文字框獲得焦點邊框變色-螞蟻部落</title>
<style type="text/css">
ul{
  list-style:none;
  margin:50px;
}
.mytest{
  border:1px solid red;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var username=document.getElementById("username");
  var pw=document.getElementById("pw");
   
  username.onfocus=function(){
    this.style.border="1px solid red";
  }
  username.onblur=function(){
     this.style.border="";
  }
  pw.onfocus=function(){
     this.className="mytest";
  }
  pw.onblur=function(){
     this.className="";
  }
}
</script>
<body>
<ul>
   <li>姓名:<input type="text" id="username" /></li>
   <li>密碼:<input type="password" id="pw" /></li>
</ul>
</body>
</html>

以上程式碼實現了我們的要求，當滑鼠放在文字框的時候，可以實現文字框變色，離開的時候恢復原樣。下

面就簡單介紹一下實現原理:

為文字框繫結事件處理函式，當文字框獲得焦點的時候通過style或者className設定邊框的樣式，當文字框失去焦點的時候就會將樣式清空。上面使用style和className設定文字框的屬性，就是為了讓閱讀者多瞭解一些內容，希望給大家有所幫助吧。

相關文章