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


Posted in Javascript onAugust 19, 2015

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

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

运行效果如下图所示:

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

在线演示地址如下:

具体代码如下:

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

Javascript 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 Javascript
Vue2.0搭建脚手架
Mar 13 Vue.js
jQuery实现的仿select功能代码
Aug 19 #Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 #Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 #Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 #Javascript
js实现文本框支持加减运算的方法
Aug 19 #Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 #Javascript
纯CSS3代码实现滑动开关效果
Aug 19 #Javascript
You might like
星际争霸兵种名称对照表
2020/03/04 星际争霸
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
javascript 触发事件列表 比较不错
2009/09/03 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
发布你的Python模块详解
2016/09/15 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
python版大富翁源代码分享
2018/11/19 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
python爬虫基础知识点整理
2020/06/02 Python
什么是python的必选参数
2020/06/21 Python
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
社团文化节策划书
2014/02/01 职场文书
怎样写好创业计划书的内容
2014/02/06 职场文书
先进集体获奖感言
2014/02/13 职场文书
平面设计求职信
2014/03/10 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
学校安全责任书范本
2014/07/23 职场文书
出生医学证明书
2014/09/15 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
写景作文评语集锦
2014/12/25 职场文书
停发工资证明范本
2015/06/12 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
SQL之各种join小结详细讲解
2021/08/04 MySQL