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

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

作者: 1194b60087a9 | 来源:发表于2019-04-20 14:33 被阅读0次

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

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

代码实例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>web前端开发学习q群:731771211  详细教程讲解</title>

<style type="text/css">

.bg{background-color:red;}

</style>

<script> 

window.function(){ 

  var inputs=document.getElementsByTagName("input");

  for(var i=0;i<inputs.length;i++){

    inputs[i].onfocus = function (){

      this.className="bg";

    }

    inputs[i].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>

十五年编程经验,今年1月整理了一批2019年最新WEB前端教学视频,不论是零基础想要学习前端还是学完在工作想要提升自己,这些资料都会给你带来帮助,从HTML到各种框架,帮助所有想要学好前端的同学,学习规划、学习路线、学习资料、问题解答。只要加入WEB前端学习交流Q群:296212562,即可免费获取。

相关文章

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/setlgqtx.html