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 prototype,executing,context,closure
Dec 24 Javascript
html中table数据排序的js代码
Aug 09 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
vuex分模块后,实现获取state的值
Jul 26 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
简单的php购物车代码
2020/06/05 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
Python实现批量下载文件
2015/05/17 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
办公室文秘岗位职责
2013/11/15 职场文书
初一英语教学反思
2014/01/11 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
大学新生入学教育方案
2014/05/16 职场文书
史上最牛辞职信
2015/05/13 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript