需要幫助將此內嵌javascript轉換爲jQuery函數

Question

我有以下顯示初始值的HTML/JS，當您在輸入字段中單擊時將其刪除，然後使用原始值重新填充它，不輸入任何東西。

我需要在同一頁面上的多個輸入字段上這樣做，因此想將它變成一個jQuery函數，然後我可以將它應用於具有某個類的任何輸入字段。

<input type="text" name="search" value="Search by name" onfocus="if (this.value == 'Search by name') {this.value = '';this.style.color = '#000';}" onblur="if (this.value == '') {this.value = 'Search by name';this.style.color = '#aaa';}" /> 

Answer 1

首先，讓您的生活更輕鬆，給輸入一個類：

<input type="text" class="search" name="search"> 

您可以使用屬性選擇：

$(":text[name='search']")... 

但這是多更快：

$("input.search")... 

然後用這個：

$(function() { 
    $("input.search").focus(function() { 
    this.defaultval = this.defaultval || $(this).val(); 
    if ($(this).val() == this.defaultval) { 
     $(this).val("").css("color", "#000"); 
    } 
    }).blur(function() { 
    if ($(this).val() == "") { 
     $(this).val(this.defaultval).css("color", "#AAA"); 
    } 
    }); 
}); 

Answer 2

$(":text[name='search']") 
    .focus(function(){ 
    if ($(this).val() == 'Search by name') 
     $(this).val("").css("color", "black"); 
    }) 
    .blur(function(){ 
    if ($(this).val() == "") 
     $(this).val("Search by name").css("color", "#aaa"); 
    }); 

Answer 3

未經檢驗

jQuery(function() { 
jQuery("input[type=text]").bind("focus",function(e){ 
    var input = e.target; 
    input.defaultval = input.defaultval || input.value; 
    if(input.value==input.defaultval) { 
     input.value = ""; 
     input.style.color = '#000'; 

    } 
}).bind("blur",function(e){ 
     var input = e.target; 
     if(input.value == '') { 
     input.value = input.defaultval; 
     input.style.color = '#aaa'; 
     } 
}) 

}); 

編輯：這似乎是比別人更通用的解決方案。它首先需要輸入字段中的默認文本。雖然我不打擾在jQuery中包裝事件目標來改變CSS。

Answer 4

把它變成一個插件

$.fn.inputMagic=function(text){ 
    return this.each(function(){ 
    var text=$(this).val()||text||'' 
    $(this).focus(function(){ 
    if ($(this).val() == text){ 
     $(this).val("").css("color", "black"); 
    } 
    }).blur(function(){ 
     if ($(this).val() == ""){ 
     $(this).val(text).css("color", "#aaa"); 
     } 
    }); 
    }); 
} 

然後，你可以這樣調用

$('input.search').inputMagic('Search by name').show();//and continue to chain