文本框获得焦点时，内容逐渐消失；失去焦点时，内容又逐渐出现！最好用jquery实现，谢谢各位高手指教！
重点是渐变效果！文本框的内容逐渐消失，不是立刻消失！http://www.asos.com/就像这个网站上的搜索框效果具体怎样实现呢，我研究了一下，还是不明白！...
重点是渐变效果！
文本框的内容逐渐消失，不是立刻消失！
http://www.asos.com/
就像这个网站上的搜索框效果
具体怎样实现呢，我研究了一下，还是不明白！ 展开
文本框的内容逐渐消失，不是立刻消失！
http://www.asos.com/
就像这个网站上的搜索框效果
具体怎样实现呢，我研究了一下，还是不明白！ 展开
4个回答
展开全部
给你写了一个，你看看。我用的是jquery-1.4.2.min.js，你要自己引用本地的jQuery库
<!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>
<style type="text/css">
*{
padding:0;
margin:0;}
#searchForm{
position:relative;
margin:50px;
}
#infor{
position:absolute;
left:5px;
top:0px;}
#search{
width:300px;
height:20px;}
</style>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#search').bind('focus',function(){
$('#infor').fadeOut('slow');
});
$('#search').bind('blur',function(){
$('#infor').fadeIn('slow');
});
});
</script>
</head>
<body>
<div id="searchForm">
<label for="search" id="infor" >Start your style search here</label>
<input name="" type="text" id="search"/>
</div>
</body>
</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>
<style type="text/css">
*{
padding:0;
margin:0;}
#searchForm{
position:relative;
margin:50px;
}
#infor{
position:absolute;
left:5px;
top:0px;}
#search{
width:300px;
height:20px;}
</style>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#search').bind('focus',function(){
$('#infor').fadeOut('slow');
});
$('#search').bind('blur',function(){
$('#infor').fadeIn('slow');
});
});
</script>
</head>
<body>
<div id="searchForm">
<label for="search" id="infor" >Start your style search here</label>
<input name="" type="text" id="search"/>
</div>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$("#textareavs").focus(function(){
var txt_value=$(this).val();
if(txt_value==this.defaultValue){$(this).val("");}
});
$("#textareavs").blur(function(){
var txt_value=$(this).val();
if(txt_value==""){$(this).val(this.defaultValue);}
});
var txt_value=$(this).val();
if(txt_value==this.defaultValue){$(this).val("");}
});
$("#textareavs").blur(function(){
var txt_value=$(this).val();
if(txt_value==""){$(this).val(this.defaultValue);}
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
呢，你看下他的代码结构
<div class="search" id="searchForm">
<label for="ctl00_ContentHeader_ctlTitleBar_ctlSearchBox_txtSearch" >
Start your style search here
</label>
<input />
</div>
也就是说，你看到的Start your style search here不是在input中的，而是在一个lable中，
将lable用样式浮动到input上，慢慢消失的是lable
<div class="search" id="searchForm">
<label for="ctl00_ContentHeader_ctlTitleBar_ctlSearchBox_txtSearch" >
Start your style search here
</label>
<input />
</div>
也就是说，你看到的Start your style search here不是在input中的，而是在一个lable中，
将lable用样式浮动到input上，慢慢消失的是lable
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
-validate 规则： 如果没有填写只有在 onsubmit 的时候才提示未填写。。
默认 onfocusout 和 onkeyup true,
如果有其他验证，如minlength 等验证，在填写时，不满足就会在失去焦点的时候就验证错误。
就是没有输入，onfocusout 不会被触发。。（个人理解）
默认 onfocusout 和 onkeyup true,
如果有其他验证，如minlength 等验证，在填写时，不满足就会在失去焦点的时候就验证错误。
就是没有输入，onfocusout 不会被触发。。（个人理解）
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
