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 盒模型 尺寸深入理解
Dec 31 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
vue中使用ueditor富文本编辑器
Feb 08 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
Vue父子传递实例讲解
Feb 14 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 XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
php数组去重的函数代码
2013/02/03 PHP
yii上传文件或图片实例
2014/04/01 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
Javascript开发包大全整理
2006/12/22 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
理解python中生成器用法
2017/12/20 Python
用python处理MS Word的实例讲解
2018/05/08 Python
windows下python安装小白入门教程
2018/09/18 Python
python命令行参数用法实例分析
2019/06/25 Python
python里运用私有属性和方法总结
2019/07/08 Python
python获取Pandas列名的几种方法
2019/08/07 Python
Django中的用户身份验证示例详解
2019/08/07 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
纪检干部个人对照检查材料
2014/09/23 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
教师个人师德总结
2015/02/06 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
js判断两个数组相等的5种方法
2022/05/06 Javascript