代码描述:jQuery设置文本框 得失焦点样式。jQuery设置文本框得失焦点样式源码下载
通常情况下,文本框获得焦点或者失去焦点的时候,会相应的对文本框的样式有所改变,以增加美观度,下面就介绍一下如何实现此功能,代码实例如下:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>文本框获得焦点的样式-51前端</title> <style type="text/css"> ul{list-style:none} ul li{ height:30px; font-size:12px; } input{ width:120px; height:16px; } .focusClass{ color:green; background-color:#CCC; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").focus(function(){ $(this).addClass("focusClass"); }).blur(function(){ $(this).removeClass("focusClass"); }); }) </script> </head> <body> <ul> <li>姓名:<input type="text" name="userName" /></li> <li>密码:<input type="password" name="pw" /></li> </ul> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能