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 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
js 获取和设置css3 属性值的实现方法
May 06 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 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通过获取头信息判断图片类型的方法
2015/06/26 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
python删除文件示例分享
2014/01/28 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
Python进程池Pool应用实例分析
2019/11/27 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
基于python实现操作redis及消息队列
2020/08/27 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
在校生自我鉴定
2014/01/23 职场文书
优秀团员个人事迹材料
2014/01/29 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
升国旗仪式主持词
2014/03/19 职场文书
认错检讨书
2014/10/02 职场文书
老人与海读书笔记
2015/06/26 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
实操Python爬取觅知网素材图片示例
2021/11/27 Python
Golang连接并操作MySQL
2022/04/14 MySQL