前端学习代码实例-input文本框焦点背景变色

最新推荐文章于 2023-11-14 13:06:00 发布

weixin_33737134

最新推荐文章于 2023-11-14 13:06:00 发布

阅读量339

点赞数

文章标签：前端 shell ViewUI

原文链接：https://my.oschina.net/zybc/blog/3039551

版权

为什么80%的码农都做不了架构师？>>>

很多网页表单设计中，当文本框获得焦点的时候会改变它的样式属性，可以提高文本框的辨识度。

下面以设置背景色为例子，对此功能做一下简单介绍。

代码实例如下:


<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>web前端开发学习q-qu-n：731771211   详细教程讲解</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>

转载于:https://my.oschina.net/zybc/blog/3039551