代码描述:input文本框 焦点背景变色。input文本框焦点背景变色
很多网页表单设计中,当文本框获得焦点的时候会改变它的样式属性,可以提高文本框的辨识度。 下面以设置背景色为例子,对此功能做一下简单介绍。 代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>input文本框焦点背景变色</title> <style type="text/css"> .bg{background-color:red;} </style> <script> window.onload=function(){ var inputs=document.getElementsByTagName("input"); for(var i=0;i<inputs.length;i++){ inputs[i].onfocus = function (){ this.className="bg"; } inputs[i].onblur=function(){ this.className=""; } } } </script> </head> <body> <form id="myform" action="#"> <ul> <li>用户名:<input type="text" name="username" /></li> <li>密码:<input type="text" name="pw" /></li> </ul> </form> </body> </html>
当文本框获取焦点的时候,能够改变它的背景,当失去焦点的时候会还原。
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能