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 UI皮肤定制
Jul 27 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
jquery()函数的三种语法介绍
Oct 09 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 Javascript
elementUI中Table表格问题的解决方法
Dec 04 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
微信小程序8种数据通信的方式小结
Feb 03 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
Content-type 的说明
2006/10/09 PHP
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
JS高级笔记
2011/07/13 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
js实现秒表计时器
2019/12/16 Javascript
用pandas按列合并两个文件的实例
2018/04/12 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
用pycharm开发django项目示例代码
2019/06/13 Python
django表单的Widgets使用详解
2019/07/22 Python
python 修改本地网络配置的方法
2019/08/14 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
大一新生军训时的自我评价分享
2013/12/05 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
2014年教师节活动总结
2014/08/29 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
大学生暑期实践报告
2015/07/13 职场文书
Matlab如何实现矩阵复制扩充
2021/06/02 Python
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技