很多网页表单设计中,当文本框获得焦点的时候会改变它的样式属性,可以提高文本框的辨识度。
下面以设置背景色为例子,对此功能做一下简单介绍。
代码实例如下:
   [ 其他 ] 运行代码    下载代码
<!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>
当文本框获取焦点的时候,能够改变它的背景,当失去焦点的时候会还原。

代码描述:input文本框 焦点背景变色。input文本框焦点背景变色



183 244



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到