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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
Jquery AJAX 用于计算点击率(统计)
Jun 30 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
vue写一个组件
Apr 09 Javascript
Vue中的字符串模板的使用
May 17 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 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 debug 安装技巧
2011/04/30 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
python读写文件操作示例程序
2013/12/02 Python
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
python unichr函数知识点总结
2020/12/16 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
外语系大学生自荐信范文
2014/03/01 职场文书
大学新生军训方案
2014/05/03 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
优秀创业计划书分享
2019/07/19 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL