文本框的应用--获得焦点和失去焦点

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

< html > < head > < style  type = "text/css" >      .focus{          border:1px solid #f00;          background:#fcc;      } </ style > < script  src = "jquery-1.11.2.js" ></ script > < script >      $(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 >< br />              < div >                  < label  for = "pass" >密码:</ label >                  < input  id = "pass"  type = "password" >              </ div >< br />              < div >                  < label  for = "msg" >详细信息:</ label >                  < textarea  id = "msg" ></ textarea >              </ div >          </ fieldset >      </ form > </ body > </ html >

浏览器都兼容。

input:focus, textarea:focus{

border:1px solid #f00;

background:#fcc;

}以上的写法，IE6不支持。

本文转自 爱笑嘚蛋蛋 51CTO博客，原文链接：http://blog.51cto.com/dd118/1671233，如需转载请自行联系原作者