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 相关文章推荐
javascript firefox兼容ie的dom方法脚本
May 18 Javascript
js no-repeat写法 背景不重复
Mar 18 Javascript
使用JavaScript库还是自己写代码?
Jan 28 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
RequireJs的使用详解
Feb 19 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
JS的函数调用栈stack size的计算方法
Jun 24 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 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
消息持续发送的完整例子
2006/10/09 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
javascript知识点收藏
2007/02/22 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
python简单的三元一次方程求解实例
2020/04/02 Python
python实现程序重启和系统重启方式
2020/04/16 Python
Python远程linux执行命令实现
2020/11/11 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
美国著名手表网站:Timepiece
2017/11/15 全球购物
高三地理教学反思
2014/01/11 职场文书
自我反省检讨书
2014/01/23 职场文书
2014年林业工作总结
2014/12/05 职场文书
捐款感谢信
2015/01/20 职场文书
蓬莱阁导游词
2015/02/04 职场文书
评职称个人总结
2015/03/05 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
Python标准库pathlib操作目录和文件
2021/11/20 Python