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 相关文章推荐
表单提交验证类
Jul 14 Javascript
Javascript remove 自定义数组删除方法
Oct 20 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 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
PHP编程网上资源导航
2006/10/09 PHP
用PHP和ACCESS写聊天室(十)
2006/10/09 PHP
一些PHP写的小东西
2006/12/06 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
javascript jQuery插件练习
2008/12/24 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
利用python实现数据分析
2017/01/11 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
python selenium firefox使用详解
2019/02/26 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
jupyter notebook 重装教程
2020/04/16 Python
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
2015年政府采购工作总结
2015/05/21 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
详细介绍python操作RabbitMq
2022/04/12 Python