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 相关文章推荐
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
jQuery链使用指南
Jan 20 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
小程序实现单选多选功能
Nov 04 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
JavaScript This指向问题详解
Nov 25 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
PHP安全上传图片的方法
2015/03/21 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
python中关于for循环的碎碎念
2017/06/30 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
安全生产汇报材料
2014/02/17 职场文书
空气环保标语
2014/06/12 职场文书
Ajax实现异步加载数据
2021/11/17 Javascript