jQuery文本框得到與失去焦點動態改變樣式效果

2019-11-20 09:03:05

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery文本框得到與失去焦點動態改變樣式效果。分享給大家供大家參考，具體如下：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css">body {  font: normal 12px/17px Arial;}div {  padding: 2px;}input, textarea {  width: 12em;  border: 1px solid #888;}.focus {  border: 1px solid #f00;  background: #fcc;}</style><script type="text/javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript">$(function(){  $(":input").focus(function(){    $(this).addClass("focus");  }).blur(function(){    $(this).removeClass("focus");  });})</script></head><body><form action="" method="post" id="regForm">  <fieldset>    <legend>個人基本信息</legend>    <div>      <label for="username">名稱:</label>      <input id="username" type="text" />    </div>    <div>      <label for="pass">密碼:</label>      <input id="pass" type="password" />    </div>    <div>      <label for="msg">詳細信息:</label>      <textarea id="msg" rows="2" cols="20"></textarea>    </div>  </fieldset></form></body></html>

運行效果圖如下：