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 学习笔记(一)DOM基本操作
Apr 08 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
AngularJS表单基本操作
Jan 09 Javascript
js实现文字选中分享功能
Jan 25 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
JS实现躲避粒子小游戏
Jun 18 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
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
打造计数器DIY三步曲(上)
2006/10/09 PHP
建站常用13种PHP开源CMS比较
2009/08/23 PHP
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
Display SQL Server Version Information
2007/06/21 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
在Python的Django框架中创建和使用模版
2015/07/15 Python
Python检测生僻字的实现方法
2016/10/23 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
python中的字符串内部换行方法
2018/07/19 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
面向对象概念面试题(.NET)
2016/11/04 面试题
期末自我鉴定
2014/01/23 职场文书