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重载函数的辅助方法2
Jul 04 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 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
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
window.location的重写及判断location是否被重写
2014/09/04 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
Django高级编程之自定义Field实现多语言
2019/07/02 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
会计专业应届生求职信
2013/11/24 职场文书
财务会计应届生求职信
2013/11/24 职场文书
大学校园生活自我鉴定
2014/01/13 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
单位委托函范文
2015/01/29 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
小学生手册家长意见
2015/06/03 职场文书
老干部座谈会主持词
2015/07/03 职场文书
大学开学感言
2015/08/01 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
调研报告的主要写法
2019/04/18 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python