search

Home  >  Article  >  Web Front-end  >  js method to highlight the current input box_javascript skills

js method to highlight the current input box_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:44:101570browse

本文实例讲述了js实现当前输入框高亮显示的方法。分享给大家供大家参考。具体如下：

这里演示利用JavaScript技术实现的当前输入框高亮显示代码，在很多的网页表单中，当用户鼠标点击文本框的时候，该文本框就会显示高亮状态，提醒用户输入，本例通过JAVAScript代码实现了这样一种效果。

运行效果如下图所示：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-table-input-color-show-codes/

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>当前输入框高亮显示</title>
<style> 
body,form,h2,p,input{margin:0;padding:0;}
body{color:#4f4f4f;font:14px/1.5 \5fae\8f6f\96c5\9ed1;}
form{width:400px;background:#fef4eb;border:2px solid #f60;padding-bottom:10px;overflow:hidden;zoom:1;margin:10px auto;}
form h2{color:#fe791e;font-size:16px;background:#ffebd7;border-bottom:2px solid #f60;padding:5px 10px;}
form p{float:left;clear:both;width:100%;height:31px;margin-top:10px;line-height:31px;}
form label,form input{float:left;}
form label{width:100px;height:31px;text-align:right;}
form input{border:0;font-family:\5fae\8f6f\96c5\9ed1;background:url(input.png) no-repeat;}
form .f-text,form .f-text-high{width:203px;height:31px;padding-left:5px;line-height:31px;}
form .f-text-high{background-position:0 -31px;}
form .f-btn{color:#fff;width:104px;height:31px;cursor:pointer;font-size:16px;background:#f60;line-height:31px;border-radius:5px;}
</style>
<script type="text/javascript"> 
window.onload = function ()
{
 var aInput = document.getElementsByTagName("input");
 var i = 0;
 for (i = 0; i < aInput.length - 1; i++)
 {
  aInput[i].onfocus = function ()
  {
   this.className = "f-text-high"
  };
  aInput[i].onblur = function ()
  {
   this.className = "f-text"
  } 
 }
};
</script>
</head>
<body>
<form>
 <h2>用户登录</h2>
 <p><label>用户名：</label><input class="f-text" type="text" /></p>
 <p><label>密码：</label><input class="f-text" type="password" /></p>
 <p><label></label><input class="f-btn" type="button" value="登 录" /></p>
</form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：IE6 compatible transparent background images and solutions_javascript skillsNext article：IE6 compatible transparent background images and solutions_javascript skills

Related articles

See more