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 日期处理之时区问题
Oct 08 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
JS实现鼠标移动拖尾
Dec 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框架Swoole定时器Timer特性分析
2014/08/19 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
python如何读写csv数据
2018/03/21 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
python多线程同步之文件读写控制
2021/02/25 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
没编程基础可以学python吗
2020/06/17 Python
美国糖果店:Sugarfina
2019/02/21 全球购物
社团招新策划书
2014/02/04 职场文书
病危通知单
2015/04/17 职场文书
关于环保的宣传稿
2015/07/23 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS
Go语言应该什么情况使用指针
2021/07/25 Golang
纯html+css实现打字效果
2021/08/02 HTML / CSS