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 控制弹出窗口
Apr 10 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
href下载文件根据id取url并下载
May 28 Javascript
javascript解析json实例详解
Nov 05 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
layui导航栏实现代码
May 19 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
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遍历数组的方法汇总分析
2013/06/08 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
javascript document.referrer 用法
2009/04/30 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
Scrapy框架使用的基本知识
2018/10/21 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
Python urllib2运行过程原理解析
2020/06/04 Python
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
同学聚会欢迎辞
2014/01/14 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
水电施工员岗位职责
2015/04/11 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
判断Python中的Nonetype类型
2021/05/25 Python