文字框獲取或者失去焦點改變樣式屬性

antzone發表於2017-03-07

很多網站為了提高美觀度或者說人性化程度，當文字框獲取或者失去焦點的時候，都能夠對它們的樣式做一下修改，下面就通過程式碼例項介紹一下如何利用jquery實現此效果，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">  
$(document).ready(function(){   
  $("#txt").focus(function(){
    $(this).css("background-color","green");
  })
  $("#txt").blur(function(){
    $(this).css("background-color","white");
  })
});
</script>
</head>
<body>
<input type="text" id="txt" />
</body>
</html>

以上程式碼中，當文字框獲得或者失去焦點的時候能夠改變文字框的背景顏色，程式碼比較簡單，可以參閱相關閱讀。

相關閱讀:

1.focus事件可以參閱jQuery focus事件一章節。

2.blur事件可以參閱jQuery blur事件一章節。

3.css()函式可以參閱jQuery css()一章節。 

相關文章