js显示文本框提示文字的方法


Posted in Javascript onMay 07, 2015

本文实例讲述了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>js提示文字</title>
<style type="text/css">
input{
width:200px; height:24px;
line-height:24px; border:1px solid #999;
background:#ccc; margin:15px 0 0 100px;
padding:4px; color:#666;
}
.current{
background:#E0FEE4;
border:1px solid #093;
}
</style>
</head>
<body>
<input name="" type="text" value="请输入姓名:"/><br />
<input name="" type="text" value="请输入昵称:"/><br />
<input name="" type="text" value="输入验证码:"/><br />
<input name="" type="text" value="请输入手机号码:"/><br />
<input name="" type="text" value="请输入电子邮件:"/>
<script type="text/javascript">
 var aInp=document.getElementsByTagName('input');
 var i=0;
 var sArray=[];
 for(i=0; i<aInp.length; i++)
 {
 aInp[i].index=i;
 sArray.push(aInp[i].value);
 aInp[i].onfocus=function()
 {
 if(sArray[this.index]==aInp[this.index].value)
 {
 aInp[this.index].value='';
 }
 aInp[this.index].className='current';
 };
 aInp[i].onblur=function()
 {
 if(aInp[this.index].value=='')
 {
 aInp[this.index].value=sArray[this.index];
 }
 aInp[this.index].className='';
 };
 }
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
js中replace的用法总结
Dec 27 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
简述JS控制台的使用
Jul 15 Javascript
vant中的toast层级改变操作
Nov 04 Javascript
JavaScript this关键字的深入详解
Jan 14 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 #Javascript
浅谈document.write()输出样式
May 07 #Javascript
js库Modernizr的介绍和使用
May 07 #Javascript
详谈LABJS按需动态加载js文件
May 07 #Javascript
JavaScript改变CSS样式的方法汇总
May 07 #Javascript
js实现非常简单的焦点图切换特效实例
May 07 #Javascript
jQuery中closest和parents的区别分析
May 07 #Javascript
You might like
咖啡语言
2021/03/03 咖啡文化
PHP 常见郁闷问题答解
2006/11/25 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
php验证码实现代码(3种)
2015/09/07 PHP
教大家制作简单的php日历
2015/11/17 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
利用Psyco提升Python运行速度
2014/12/24 Python
更改Python命令行交互提示符的方法
2015/01/14 Python
Python素数检测的方法
2015/05/11 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
Python continue语句实例用法
2020/02/06 Python
Python @property及getter setter原理详解
2020/03/31 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
家长学校实施方案
2014/03/15 职场文书
合作协议书模板
2014/10/10 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
储备店长岗位职责
2015/04/14 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python