jquery佔位符函數：當輸入爲空時，佔位符值被髮送

Question

我在jquery中寫了一個佔位符函數，它工作正常，但是當這個字段爲空時，它實際上佔有了佔位符的值。我在函數之外解決了它，我在提交時在sendForm（）函數中檢查它。但我想在佔位符函數內解決它，使它適用於所有情況。 下面是代碼：

jquery的佔位符：

$(":input[data-placeholder]").each(function(index){  

    if ($(this).val() == "")     
    { 
     $(this).val($(this).data("placeholder"));   
     $(this).addClass("placeholder");    
    }   
    }).live("focus",function(){ 
     //check if the field not filled 
     if($(this).hasClass("placeholder")) 
     { 
      $(this).removeClass("placeholder"); 
      $(this).val(""); 
     } 
    }).live("blur",function(){  
     if($(this).val()=="") 
     { 
      $(this).val($(this).data("placeholder"));   
      $(this).addClass("placeholder");     
     } 

    }); 

HTML：

  <form name="forme" method="post" onsubmit="return sendForm();"> 
       <div id="fields">     
        <input type="text" name="userName" id="userName" data-placeholder="שם מלא"/> 
        <input type="text" name="userPhone" id="userPhone" data-placeholder="טלפון"/> 
        <input type="text" name="userMail" id="userMail" data-placeholder='דוא"ל'/> 
        <!--<textarea name="userMail" id="userMail" data-placeholder='דוא"ל'></textarea>--> 
       </div> 
       <input type="submit" id="submit" value="הרשמה"> 
      </form> 

sendForm（）：

function sendForm(){ 

var uname, uphone, umail; 
$("#userName").hasClass("placeholder") ? uname="" : uname=$("#userName").val(); 
$("#userPhone").hasClass("placeholder") ? uphone="" : uphone=$("#userPhone").val(); 
$("#userMail").hasClass("placeholder") ? umail="" : umail=$("#userMail").val(); 

var dataObject = {name: uname, phone: uphone, mail: umail}; 

if(validate(uname,uphone,umail)) 
{ 

Answer 1

只需添加一個onsubmit處理給每個元素的形式在.each()循環：

var form = $(this).closest('form'); 
// check if onsubmit handler is not already installed for this form 
if (!form.data('placeholder-processed')) { 
    form.data('placeholder-processed', true); 
    form.on('submit', function() { 
     // move your sendForm() logic here 
    } 
} 

請注意，您.each()循環將處理在你運行它時的所有現有元素，但你.live()事件處理程序也將觸發爲input[data-placeholder]元素創建後您已經運行.each()。

Answer 2

jQuery的佔位符（加在提交您的佔位符）：

$(document).ready(function(){ 
    $(':input[data-placeholder]').each(function(index){ 
     if($(this).val() == ''){ 
      $(this).val($(this).data('placeholder')); 
      $(this).addClass('placeholder'); 
     } 
     $(this).closest('form').submit(function(){ 
      $(':input[data-placeholder]').each(function(){ 
       if($(this).hasClass('placeholder')){ 
        $(this).removeClass('placeholder'); 
        $(this).val(''); 
        //console.log($(this)); 
       } 
      }); 
     }); 
    }).live('focus', function(){ 
     //check if the field not filled 
     if($(this).hasClass('placeholder')){ 
      $(this).removeClass('placeholder'); 
      $(this).val(''); 
     } 
    }).live('blur', function(){ 
     if($(this).val() == ''){ 
      $(this).val($(this).data('placeholder')); 
      $(this).addClass('placeholder'); 
     } 
    }); 
}); 

CSS樣式佔位符：

.placeholder{color:#a0a0a0;} 

的DOM後的第一件事是.ready運行一個循環所有具有屬性data-placeholder的輸入標籤。

然後，它檢查是否有輸入沒有價值，並搜索最接近form標籤與jQuery.closest()函數（方法），這是工作的方式了DOM，直到它找到零個或一個元素jQuery.closest('form')(unlike jQuery.patents())。

然後，你已經編寫代碼保持運行。