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 相关文章推荐
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
js动态切换图片的方法
Jan 20 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 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程序员的技术瓶颈分析
2011/07/17 PHP
php实现文件编码批量转换
2014/03/10 PHP
php学习笔记之基础知识
2014/11/08 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
Python中的字符串查找操作方法总结
2016/06/27 Python
怎样使用Python脚本日志功能
2016/08/14 Python
python 输出上个月的月末日期实例
2018/04/11 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
旷课检讨书3000字
2014/02/04 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python
Java界面编程实现界面跳转
2022/06/16 Java/Android