jquery搜尋方塊效果實現方法

來源:互聯網
上載者:User

 這篇文章主要介紹了jquery搜尋方塊效果實現方法,分析了jquery搜尋方塊效果的實現技巧及注意事項,具有一定參考借鑒價值,需要的朋友可以參考下

  

本文執行個體講述了jquery搜尋方塊效果實現方法。分享給大家供大家參考。具體實現方法如下:

 

代碼如下:<html>
<head>
<title>jquery:搜尋方塊效果</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#search').val("請輸入搜尋內容").addClass("c1");
$('#search').focus(function(){//搜尋方塊獲得焦點時
$('#search').val("").addClass("c2");
});
$('#search').blur(function(){//搜尋方塊失去焦點時
if($('#search').val()==""){
$('#search').val("請輸入搜尋內容").attr("class","c1");
}
});
});
</script>
<style type="text/css">
.c1{color:gray;font-style:italic;}
.c2{color:#000;font-style:normal;}
</style>
</head>
<body>
<input type="text" size="38" id="search" /><button>搜尋</button>
</body>
</html>
補充說明:有些不完美,如果搜尋方塊原來還有其它樣式,當失去焦點時,如果採用例子中的代碼,那其它樣式也會沒了,因為attr()為設定樣式。如果採用addClass()為追加樣式,也不怎麼合適,雖然能達到效果,但原來的c2樣式還在,顯示時被c1樣式替換而已(這需要c1樣式寫在c2後面)。好像沒有替換樣式的方法?

 

修改後解決上面的問題,較完美版本(代碼還可以最佳化更簡單)

代碼如下:<html>
<head>
<title>jquery:搜尋方塊效果</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#search').val("請輸入搜尋內容").addClass("c1");
$('#search').focus(function(){//搜尋方塊獲得焦點時
if($('#search').val()=="請輸入搜尋內容"){
$('#search').val("").addClass("c2").removeClass("c1");
}
});
$('#search').blur(function(){//搜尋方塊失去焦點時
if($('#search').val()==""){
$('#search').val("請輸入搜尋內容").addClass("c1").removeClass("c2");
}
});
});
</script>
<style type="text/css">
.c1{color:gray;font-style:italic;}
.c2{color:#000;font-style:normal;}
</style>
</head>
<body>
<input type="text" size="38" id="search" /><button>搜尋</button>
</body>
</html>

 

希望本文所述對大家的jQuery程式設計有所協助。

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。