使用jQuery給input標(biāo)簽設(shè)置默認(rèn)值
更新時(shí)間：2016年06月20日 10:56:02 作者：沫魚(yú)
這篇文章主要介紹使用jQuery給input標(biāo)簽設(shè)置默認(rèn)值的方法，實(shí)例講解，非常實(shí)用，需要的朋友可以參考下。
由于項(xiàng)目需求，簡(jiǎn)單地寫(xiě)了一個(gè)input默認(rèn)值設(shè)置，實(shí)現(xiàn)給.form中所有的input設(shè)置默認(rèn)值的方法。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>input默認(rèn)值設(shè)置</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//集體調(diào)用
$(".form input").each(function(){
$(this).setDefauleValue();
});
//單個(gè)調(diào)用
$("#key").setDefauleValue();
})
//設(shè)置input,textarea默認(rèn)值
$.fn.setDefauleValue = function() {
var defauleValue = $(this).val();
$(this).val(defauleValue).css("color","#999");
return this.each(function() {
$(this).focus(function() {
if ($(this).val() == defauleValue) {
$(this).val("").css("color","#000");//輸入值的顏色
}
}).blur(function() {
if ($(this).val() == "") {
$(this).val(defauleValue).css("color","#999");//默認(rèn)值的顏色
}
});
});
}
</script>
</head>
<body>
<form class="form">
<input type="text" size="30" value="輸入昵稱(chēng)">
<br>
<input type="text" size="30" value="輸入姓名">
</form>
<br>
<br>
<br>
<input type="text" size="30" id="key" value="輸入學(xué)員ID、姓名、昵稱(chēng)進(jìn)行查找">
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
jquery中的ajax方法怎樣通過(guò)JSONP進(jìn)行遠(yuǎn)程調(diào)用
這篇文章主要介紹了jquery中的ajax方法怎樣通過(guò)JSONP進(jìn)行遠(yuǎn)程調(diào)用,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了jquery實(shí)現(xiàn)的禁止回車(chē)觸發(fā)表單提交的方法，非常的使用，這里推薦給大家。2014-12-12
下面小編就為大家?guī)?lái)一篇JQuery的常用選擇器、過(guò)濾器、方法全面介紹。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
jQuery中獲取checkbox選中項(xiàng)等操作及注意事項(xiàng)
今天在做一個(gè)項(xiàng)目功能時(shí)需要顯示checkbox選項(xiàng)來(lái)讓用戶(hù)進(jìn)行選擇，由于前端不是很熟練，所以做了一個(gè)簡(jiǎn)單的Demo，其中遇到一些小問(wèn)題，特記錄下來(lái)，希望能幫到遇到類(lèi)似問(wèn)題的同學(xué)們2013-11-11
這篇文章主要介紹了jquery的方法屬性,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-11-11
jQuery簡(jiǎn)單實(shí)現(xiàn)title提示效果示例
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)title提示效果的方法,結(jié)合實(shí)例形式分析了jQuery封裝與使用title提示框的方法,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了綁定回車(chē)enter事件代碼,需要的朋友可以參考下2014-05-05
根據(jù)jquery的注釋?zhuān)涫瞧ヅ銱TML字符串和ID選擇器2011-08-08
jQuery學(xué)習(xí)筆記 操作jQuery對(duì)象 CSS處理
在對(duì)class屬性的操作中，實(shí)際上已經(jīng)改變?cè)貥邮搅?，但這些都是根據(jù)已設(shè)定的CSS規(guī)則間接生效的。因此我們有必要使用更為直接的方式來(lái)改變?cè)仍O(shè)定好了的CSS規(guī)則2012-09-09
JQ獲取動(dòng)態(tài)加載的圖片大小的正確方法分享
這篇文章介紹了JQ獲取動(dòng)態(tài)加載的圖片大小的正確方法，有需要的朋友可以參考一下2013-11-11