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 相关文章推荐
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 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
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
JS面向对象编程详解
2016/03/06 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
python基础教程之五种数据类型详解
2017/01/12 Python
python处理xml文件的方法小结
2017/05/02 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
python实现归并排序算法
2018/11/22 Python
python django中8000端口被占用的解决
2019/12/17 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
财务出纳岗位职责
2015/03/31 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python