jQuery模糊文本並在Focus上清空

Question

我有多個這樣的文本框。 我想將文本應用於模糊並在聚焦時為空。 我可以為單個文本框實現此目的。 我如何傳遞當前元素ID而不是對JavaScript函數中的“ #name”值進行硬編碼？

$(document).ready(function(){


    $('#Name').focus(function()
    {
         var $ele = $(this).attr('id');
            $(this).val('');
            $(this).css('color', '#000000');
    });

    $('#Name').blur(function()
    {
           var $ele = $(this).attr('id');
            $(this).val($ele);
            $(this).css('color', '#a9a9a9')
    });
});



<input id="Name" type="text" value="" name="Name">
<input id="Phone" type="text" value="" name="Phone" >
<input id="Email" type="text" value="" name="Email">

Answer 1

您可以通過$('input')選擇所有輸入，並可以使用[type="text"]放置過濾器文本輸入； 您可以利用jQuery鏈的優勢。

$(document).ready(function(){   

    $('input[type="text"]').focus(function()
    {
         var $ele = $(this).attr('id');
            $(this).val('');
            $(this).css('color', '#000000');
    }).blur(function()
    {
           var $ele = $(this).attr('id');
            $(this).val($ele);
            $(this).css('color', '#a9a9a9')
    });
});

您可以直接在html中設置輸入字段的值

<input id="Name" type="text" value="Name" name="Name">

或在頁面加載時將默認值應用為：

$('input[type="text"]').each(function(){
   var $ele = $(this).attr('id');
                $(this).val($ele);
                $(this).css('color', '#a9a9a9')

});

的HTML

<input id="Name" type="text" value="" name="Name">
<input id="Phone" type="text" value="" name="Phone" >
<input id="Email" type="text" value="" name="Email">

Answer 2

您需要修改您的js

$(function(){
    $('input').focus(function()
    {
        $(this)
            .val($(this).attr('name'))
            .css('color', '#000000')

    }).blur(function()
    {
            $(this).css('color', '#a9a9a9')
    });
})();​

如果您將值設置為“模糊”，則會丟失當前值...我不確定這正是您想要的

Answer 3

將其應用於input而不是#name 。

這將適用於所有輸入。

或為要更改的元素提供.class 。

Answer 4

您可以選擇所有帶有$('input[type="text"]') ，但我認為您只想使用placeholder HTML屬性 。

Answer 5

查看jQuery選擇器 。 您現在正在使用ID作為選擇器。 您有很多不同的選擇...

如果希望將“ #Name”替換為頁面上的所有輸入，則可以將其替換為“ #Name”，或者甚至可以向要觸發腳本的所有元素添加通用類“ class =“ test””，然后僅將具有該類名稱的輸入元素替換為“ .test”或“ input.test”。