给input文本框添加灰色提示文字,三种方法.

1.这个是HTML5的属性. h5的好简单....

placeholder="这里输入文字"

2.HTML的:

value="你的提示文字" onFocus="if(value==defaultValue){value=‘‘;this.style.color=‘#000‘}" onBlur="if(!value){value=defaultValue;this.style.color=‘#999‘}" style="color:#999999"

3.度娘的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>

时间: 2024-10-10 09:24:06

给input文本框添加灰色提示文字,三种方法.的相关文章

jQuery实现input文本框内灰色提示文本效果

方法1 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>input test</title> <script type="text/javascript" src="./js/jquery.js"></script&g

Mac添加环境变量的三种方法

Mac添加环境变量的三种方法   法一:系统级,修改/etc/paths(每一行是一个环境变量)   法二:系统级,方便管理 1.创建一个文件: sudo touch /etc/paths.d/mysql 2.用 vim 打开这个文件(如果是以 open -t 的方式打开,则不允许编辑): sudo vim /etc/paths.d/mysql 3.编辑该文件,键入路径并保存(关闭该 Terminal 窗口并重新打开一个,就能使用 mysql 命令了) /usr/local/mysql/bin

【Android基础篇】TabHost导航栏添加标签页的三种方法

使用TabHost实现的导航栏有三种添加页面的方法,分别是直接在布局代码的tab里面添加:通过include标签添加:通过Java代码指定另一个Activity添加.下面是三种方法的示例: 直接在布局代码的tab里面添加标签页 使用拖控件拖出来的TabHost,在它的布局层次上会有三个LinearLayout,id分别为tab1.tab2.tab3,如下图所示: 然后我们可以新建一个Layout,在这个Layout里设计好界面后,将xml代码直接放入tab(1.2.3)的标签里,如下图所示,将设

PHP中添加HTML代码的三种方法

php中添加HTML代码,就是php类型的文件中添加html代码~ 第一种是在HTML中加PHP. 大段大段的html代码中,在各个需要执行php的地方<?php .... ?> 比如 line7-9: 1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <meta http-equiv="Conten

在VS中添加lib的第三种方法

先说说普通的两种方法: 方法1:  通过设置工程配置来添加lib库. 转自网上: A.添加工程的头文件目录:工程---属性---配置属性---c/c++---常规---附加包含目录:加上头文件存放目录. B.添加文件引用的lib静态库路径:工程---属性---配置属性---链接器---常规---附加库目录:加上lib文件存放目录.C  然后添加工程引用的lib文件名:工程---属性---配置属性---链接器---输入---附加依赖项:加上lib文件名. 这种方法比较繁琐,且不直观,而且还可能要争

在VS中添加lib库的三种方法

注意:每种方法也要复制相应的DLL文件到相应目录 方法1:  通过设置工程配置来添加lib库. A.添加工程的头文件目录:工程---属性---配置属性---c/c++---常规---附加包含目录:加上头文件存放目录. B.添加文件引用的lib静态库路径:工程---属性---配置属性---链接器---常规---附加库目录:加上lib文件存放目录.C  然后添加工程引用的lib文件名:工程---属性---配置属性---链接器---输入---附加依赖项:加上lib文件名. 这种方法比较繁琐,且不直观,

安卓按钮添加监听的三种方法

在安卓开发中,对按钮添加监听,是每一个app都需要用到的.通常我们会用三种办法来对按钮进行监听.下面我们哎说说着三种.我个人是比较喜欢匿名内部类的方法的. 第一种,匿名内部类 匿名内部类一般通过以下代码完成,顾名思义,通过传入匿名内部类来实现监听并写出对应的事件处理 btButton.setOnClickListener(new OnClickListener() { @SuppressLint("ShowToast") @Override public void onClick(Vi

input文本框输入内容控制

CreateTime--2016年10月24日15:17:17Author:Marydoninput文本框录入内容控制 1.控制录入的最多是保留两位小数的数字 <input type="text" onkeyup="this.value=this.value.match(/\d+(\.\d{0,2})?/)||[''])[0]" /> UpdateTime--2016年12月17日22:02:18 2.控制不能录入中文,这里只能使用onkeyup属性,原

给 input 文本框和 textarea 多行文本框添加发光焦点响应特效(css)

给 input 文本框和 textarea 多行文本框添加发光焦点响应特效css3 transition 属性是一个简写属性,用于设置四个过渡属性 CSS 属性的名称 all完成过渡效果需要多少秒或毫秒 0.30s速度效果的速度曲线 :ease-in-out定义过渡效果何时开始: css3 box-shadow 属性向框添加一个或多个阴影. box-shadow: h-shadow v-shadow blur spread color inset; 0 0 5px rgba(81, 203, 2