首页 > web前端 > js教程 > js实现当前输入框高亮显示的方法_javascript技巧

js实现当前输入框高亮显示的方法_javascript技巧

WBOY
发布: 2016-05-16 15:44:10
原创
1634 人浏览过

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

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

运行效果如下图所示:

在线演示地址如下:

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

具体代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<!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程序设计有所帮助。

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板