使用jQuery給input標簽設置默認值
更新時間：2016年06月20日 10:56:02 作者：沫魚
這篇文章主要介紹使用jQuery給input標簽設置默認值的方法，實例講解，非常實用，需要的朋友可以參考下。
由于項目需求，簡單地寫了一個input默認值設置，實現給.form中所有的input設置默認值的方法。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>input默認值設置</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//集體調用
$(".form input").each(function(){
$(this).setDefauleValue();
});
//單個調用
$("#key").setDefauleValue();
})
//設置input,textarea默認值
$.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");//默認值的顏色
}
});
});
}
</script>
</head>
<body>
<form class="form">
<input type="text" size="30" value="輸入昵稱">
<br>
<input type="text" size="30" value="輸入姓名">
</form>
<br>
<br>
<br>
<input type="text" size="30" id="key" value="輸入學員ID、姓名、昵稱進行查找">
</body>
</html>
以上就是本文的全部內容，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文將為大家介紹下jQuery模擬超鏈接點擊效果實現，感興趣的朋友可以參考下哈，希望對你有所幫助2013-04-04
jquery 之 $().hover(func1, funct2)使用方法
.hover(func1, func2) 的效果等效于： mouseenter(), mouseleave()2012-06-06
使用jQuery和Bootstrap實現多層、自適應模態(tài)窗口
這篇文章主要介紹了使用jQuery和Bootstrap實現多層、自適應模態(tài)窗口,需要的朋友可以參考下2014-12-12
jquery formValidator插件ajax驗證 內容不做任何修改再離開提示錯誤的bug解決方法
query formValidator插件非常好用，但是有一個嚴重的Bug，在使用ajax驗證的時候，如果輸入框的內容已經存在，把鼠標放到輸入框，不做任何修改再離開，則會提示錯誤,很是郁悶2013-01-01
這段代碼是我在做13年一份兼職的時候無聊加上去的，為jQuery添加觸摸事件的支持。因為做得有點無聊，所以就幫客戶添加了用響應式網頁+JS touch兼容了移動設備，主要是Webkit的移動設備2014-02-02
這篇文章主要介紹了jQuery實現購物車的總價計算和總價傳值功能 ,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了通過jquery的attr方法來禁用表單元素禁輸入內容，示例如下，需要的朋友可以參考參考2014-06-06
jquery.treeview 數據通過JSON數據加載，有需要的朋友，可以通jquery的AJAX方法獲取相關的JSON數據。2010-10-10
jquery插件沖突(jquery.noconflict)解決方法分享
本文主要解決了如何讓多個不同的jQuery版本在同一個頁面并存而不沖突的方法,需要的朋友可以參考下2014-03-03
本文主要介紹了常用的幾個JQuery代碼片段。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03