清除輸入，textarea模糊和默認如果字段爲空

我想清除兩個輸入字段分配的類，和一個textarea與模糊的默認值分配一個類，並返回它默認只有當字段是該字段退出時爲空白。如果用戶已經包含他們自己的文本，我需要留下來。清除輸入，textarea模糊和默認如果字段爲空

這是我迄今：

$("input, textarea").focus(function() { 
this.value = ""; 
}); 

$(".namefield").on("blur", function() { 
$(this).val("Name"); 
}); 

$(".emailfield").on("blur", function() { 
$(this).val("Email"); 
}); 

$(".messagefield").on("blur", function() { 
$(this).val("Message"); 
});

來源

2016-02-25 user2109237

請說明您的具體問題或添加額外的細節，以確切地突出你所需要的。正如它目前所寫，很難確切地說出你在問什麼。 –

HTML'placeholder'屬性會爲你做所有這些。這是一個選擇嗎？ http://www.w3schools.com/tags/att_input_placeholder.asp –

我有一個通過Wordpress中的插件生成HTML的表單，所以不能包含佔位符屬性。我在字段（名稱，電子郵件，消息）中設置了我需要在焦點上刪除的默認值，並且只有在用戶退出字段而不添加新值的情況下才會再次出現在字段中。但是如果一個新的價值被添加到現場，我需要它留下來。 – user2109237

首先快速注意到，在HTML placeholder屬性將做的正是你描述本身是什麼。如果可能的話，我鼓勵這是首選。實施將僅僅是：

<input type="text" class="namefield" placeholder="Name" />

它更多閱讀是在這裏：http://www.w3schools.com/tags/att_input_placeholder.asp

如果您不能添加屬性的元素，但你必須設置的值，你可以使用jQuery動態添加屬性。你可以使用我們最初討論的jQuery方法，或者你可以添加placeholder屬性。

這裏是兩個例子，我也更新了一個工作示例的JS小提琴。

使用預留

$(document).ready(function() { 
    $("input, textarea").each(function() {  
     $(this).attr('placeholder',$(this).val()); 
     $(this).val(''); 
    }) 
})

結合使用數據默認與原來的答案

$(document).ready(function() { 
    $("input, textarea").each(function() {  
     $(this).data('default',$(this).val()); 
    }) 
})

原來的答案：

如果您仍然需要使用jQuery，你可以設置並檢查狀態並將其與默認值進行比較。像這樣的東西會工作：

HTML

<input type="text" class="namefield" data-default="Name" value="Name" /> 
<input type="text" class="emailfield" data-default="Email" value="Email" />

的JavaScript

$(document).ready(function() { 
    $("input, textarea").focus(function() { 
    if($(this).data('default') == $(this).val()) { 
     $(this).val(''); 
    } 
    }); 


    $("input, textarea").blur(function() { 
    if($(this).val() == '') { 
     $(this).val($(this).data('default')); 
    } 
    }); 
})

你可以看到它在這方面的工作JS小提琴：https://jsfiddle.net/77Lk4kep/1/

希望幫助！

來源

2016-02-25 15:25:10

不幸的是，我無法將數據默認添加到輸入標籤。我的表單是通過Wordpress插件生成的，所以我只能添加一個類和值。以下是我可以使用的輸入標籤的示例。 '' – user2109237

@ user2109237多數民衆贊成在很簡單，你可以使用jQuery從'value'動態添加'placeholder'屬性。通過一些工作，你可以更新wordpress插件中的php，從頭開始包含'placeholder'屬性。我用一個新的例子更新了答案。希望有所幫助！ –

謝謝！在'佔位符'中加入了奇蹟，但是現在這些字段沒有清除焦點。我試圖將您的解決方案與我的原始解決方案配對，但沒有運氣。有什麼想法嗎？ – user2109237

清除輸入，textarea模糊和默認如果字段爲空

回答

相關問題