输入型提示语消失/点击型提示语消失


<!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>文本框输入文字后提示语消失特效</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("#focus .input_txt").each(function(){
var thisVal=$(this).val();
//判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示
if(thisVal!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
//聚焦型输入框验证
$(this).focus(function(){
$(this).siblings("span").hide();
}).blur(function(){
var val=$(this).val();
if(val!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
});
})
$("#keydown .input_txt").each(function(){
var thisVal=$(this).val();
//判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示
if(thisVal!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
$(this).keyup(function(){
var val=$(this).val();
$(this).siblings("span").hide();
}).blur(function(){
var val=$(this).val();
if(val!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
})
})
})
</script>
<style type="text/css">
form{width:400px;margin:10px auto;border:solid 1px #E0DEDE;background:#FCF9EF;padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;}
label{display:block;height:40px;position:relative;margin:20px 0;}
span{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;}
.input_txt{width:398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;text-indent:10px;}
.input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;}
.border_radius{border-radius:5px;color:#B00000;}
h2{font-family:"微软雅黑";text-shadow:1px 1px 3px #fff;}
</style>
</head>

<body>
<form class="border_radius" id="focus">
<h2>聚焦型提示语消失</h2>
<label><span>登录邮箱</span><input type="text" class="input_txt border_radius" /></label>
<label><span>密码</span><input type="text" class="input_txt border_radius" /></label>
</form>
<form class="border_radius" id="keydown">
<h2>输入型提示语消失</h2>
<label><span>登录邮箱</span><input type="text" class="input_txt border_radius" /></label>
<label><span>密码</span><input type="text" class="input_txt border_radius" /></label>
</form>

</body>
</html>

代码用来学习交流

时间: 2024-10-29 01:08:57

输入型提示语消失/点击型提示语消失的相关文章

html中input文本框,初始里边有文字提示,当点击时,文字消失

js解决方法使用onfocus事件检查当前值,如果是默认值,就将value属性置空.如:<input type="text" value="请输入内容" onfocus="javascript:if(this.value=='请输入内容')this.value='';">---------------------------------------------------------- HTML5的placeholder属性的实现方法

点击按钮出现提示框三秒,三秒后消失

点击按钮出现提示框三秒,三秒后消失 .prompt{ display: none; padding:20px; position: fixed; top: 40%; left:40%; border-radius:5px; background: rgba(0,0,0,0.4); z-index: 5000; color:#FFF;} <button class="btn">alert</button><p class="prompt"

android开发之AlertDialog点击按钮之后不消失

最近有这样一个需求,我需要用户在一个弹出框里输入密码来验证,验证成功当然好说,但是如果验证失败则需要把alertdialog的标题改为"密码错误,请重新输入",并且这个alertdialog还不能消失,要等待用户继续输入. 那么怎么实现点击确定或者取消按钮之后dialog不消失呢? // 不关闭dialog try { // 不关闭 Field field = dialog .getClass() .getSuperclass() .getDeclaredField( "mS

Textarea 单击鼠标 清除默认字/点击文本域 默认内容消失/点击文本框 删除预置内容

Textarea 单击鼠标 清除默认字/点击文本域 默认内容消失/点击文本框 删除预置内容. Textarea 单击鼠标 清除默认字 点击文本域 默认内容消失 点击文本框 删除预置内容 在留言框.搜索栏或者Email订阅栏中有一段默认的文本,比如“请输入您的内容”,如果你在其中点击(窗体获取焦点),这段默认的文本就会自动消失. 第一步:添加代码方式: <head> …. <script type=”text/javascript”> function clearDefault(el

shortlong能够应用到整型shortint或short短整型

得到扩大的数据类型.,unsign能够应用到整型和字符型:ongint或long长整型unsignint 无符号整型unsignshort无符号短整型unsignlong无符号长整型unsignchar无符号字符型C言语的根本数据类型有以下几个 :int整型char字符型float单精度浮点型doubl双精度浮点型别的.> 整型    C标准没有规定各类数据所占内存字节数,一般一个int型数据所占内存与计算机字长巨细一样,为16位或32位 ,short型数据一般占16位,long型数据是32位.

(DateTime)日期型数据转换成C#长整型数据

这里介绍日期型数据转换成C#长整型数据,由于各种数据库对日期型的定义和处理是不一样的,各种语言对日期型数据的定义的处理也各不相同,因为,我宁愿将日期型数据转换成长整型数据再保存到数据库中. AD:51CTO 网+ 第十二期沙龙:大话数据之美_如何用数据驱动用户体验 C#语言还是比较常见的东西,这里我们主要介绍日期型数据转换成C#长整型数据,包括介绍DateTime 的构造函数等方面. 转自:http://developer.51cto.com/art/200908/147684.htm 日期型数

2014年去哪儿网笔试题--给定一个整型数组,对这个整型素组排序,使得按序拼接数组各元素得到的值最小。

2014年去哪儿网笔试题--给定一个整型数组,对这个整型素组排序,使得按序拼接数组各元素得到的值最小. 我的大致思路是把这个整型数组转换成String数组,然后通过String类的compareTo方法对这个数组进行第一次排序,排序得到的结果恰好是按字典序排序,而字典序又恰好是数字从0-9的顺序,恰好符合这个要求.最后进行检验下,有的可能需要调换下顺序使得数最小. package com.cn.qunar.test; /** * @author 刘利娟 [email protected] * @

eclipse代码自动提示,eclipse设置代码自动提示

eclipse是很多JAVA开发者基本上都用的工具,用它可以很方便的开发JAVA代码,当编写JAVA代码时,大部分人都是按组合键[Alt+/] 来获取代码提示的,其实可以设置只要输入代码就自动提示,在这里教大家怎么做 方法/步骤 首先打开Eclipse开发软件,然后在工具栏的[Window],点击后找到弹出列表中的[Preferences]选项,然后点击这个选项 现在弹出的窗口就是JAVA开发人员常见的设置窗口了,我们依次点开[JAVA]>>>[Editor]>>>[C

inupt textarea提示文字(点击消失,不输入恢复)

<input name="textfield" type="text"  maxlength="20" value="请输入文字.." onfocus="if (value =='请输入文字..'){value =''}" onblur="if (value ==''){value='请输入文字..'}" /> <br><br> textarea: &