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 相关文章推荐
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
使用js画图之饼图
Jan 12 Javascript
Javascript验证方法大全
Sep 21 Javascript
JavaScript函数基础详解
Feb 03 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
详解vue表单——小白速看
Apr 08 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 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
收集的DedeCMS一些使用经验
2007/03/17 PHP
php实现httpclient类示例
2014/04/08 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
Python中的map、reduce和filter浅析
2014/04/26 Python
Python Web服务器Tornado使用小结
2014/05/06 Python
Python中的迭代器漫谈
2015/02/03 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
Python简单实现区域生长方式
2020/01/16 Python
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
任课老师推荐信范文
2013/11/24 职场文书
两只小狮子教学反思
2014/02/05 职场文书
表决心的诗句大全
2014/03/11 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
经营场所证明范本
2015/06/19 职场文书
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL
nginx配置之并发频次限制
2022/04/18 Servers