文本框输入文字后提示语消失特效
来源:互联网 发布:自制食品如何在淘宝 编辑:程序博客网 时间:2024/05/16 11:38
转 http://www.lanrentuku.com/js/form-889.html
<!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>
<p>查找更多代码,请访问:<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></p>
<p><script type="text/javascript" src="http://d.lanrentuku.com/goto/js-preview-728x90.js"></script></p>
</body>
</html>
- 文本框输入文字后提示语消失特效
- 文本框输入文字后提示语消失特效
- 输入框提示文字点击时消失网页特效
- 文本框输入值文字消失
- 文本框默认显示的字(提示的文字),点击后文字消失。
- EditText不消失的提示文字,在提示文字后进行输入
- 文本框获得焦点后文本框内的提示文本消失 失去焦点后如果没有输入再显示提示
- html中input文本框,初始里边有文字提示,当点击输入文字时,原文字消失
- JS特效:文字闪烁后自动消失
- h5页面中虚化文本框默认内容,当输入文字后默认内容消失怎么做?
- input文本框输入框智能文字提示
- 实现网页文本框显示灰色提示文字且点击后消失的一个小函数(基于jquery)
- js 鼠标点击文本框 提示文字消失 (小例子)
- input文本框内添加提示文字,填写内容时消失
- 文本框输入文字后,按回车键搜索
- 文本框输入内容提示消失的两种实现
- placeholder属性 点击文本框,输入值默认提示内容消失
- web中文本框的提示字段 点击后消失
- HDU Coins
- 设计模式经典解释
- 杭电2534-Score
- [C++ 2011 STL (VS2012 Update4) 源代码阅读系列(3)]模板函数指针的的各种组合以及调用的方式
- hdu 4486 Pen Counts
- 文本框输入文字后提示语消失特效
- QT中Delete的使用
- QT在linux下的交叉编译
- 一步一步学数据结构之1--n(通用树)
- VPN静态路由设置
- Myeclipse 中svn插件安装方法总结
- hdu 3033 I love sneakers!(长姿势了,分组背包)
- 为什么Android应用用Java开发,为什么Android大型游戏要用数据包?这里根据我的知识做一个总结
- Asc码排序,冒泡排序