jquery添加輸入值 - 驗證後不顯示輸入值

Question

我在我的網站上有註冊表單，使用jquery將默認值附加到，並且onFocus/blur默認值隱藏並相應地顯示。

我的問題是，當表單被提交，並已使用php驗證踢回錯誤時，我無法顯示字段中的發佈值。 JavaScript似乎寫在張貼的數據，在輸入值使用php回顯。

當我在發佈表單後查看頁面源代碼時，我發現在輸入的值中，我確實顯示了發佈的值，即我想要顯示的值。例如：

<input type="text" name="first_name" value="Harry" /> 

PHP已經完成了將發佈的數據回顯到我的輸入值中的工作。然後Javascript改變它，以便用戶不用看到他們的名字（在這個例子中是Harry），他們再次看到默認的jquery附加「名字」。

即使我在輸入中有值，也會發生這種情況。

我該如何修改我的Javascript來記錄我的輸入值而不是寫它呢？

這是迄今爲止的代碼：

$(document).ready(function() { 

$('input[name=first_name]').val('First name'); 
    $('input[name=last_name]').val('Last name'); 
    $('input[name=email_address]').val('Email address'); 

    // cache references to the input elements into variables 
    var passwordField = $('input[name=password]'); 
    var emailField = $('input[name=email_address]'); 
     var firstnameField = $('input[name=first_name]'); 
      var lastnameField = $('input[name=last_name]'); 

    // get the default value for the fields 
    var emailFieldDefault = emailField.val(); 
     var firstnameFieldDefault = firstnameField.val(); 
     var lastnameFieldDefault = lastnameField.val(); 

    // add a password placeholder field to the html 
    passwordField.after('<input id="passwordPlaceholder" type="text" value="Password" autocomplete="off" />'); 
    var passwordPlaceholder = $('#passwordPlaceholder'); 

    // show the placeholder with the prompt text and hide the actual password field 
    passwordPlaceholder.show(); 
    passwordField.hide(); 

    // when focus is placed on the placeholder hide the placeholder and show the actual password field 
    passwordPlaceholder.focus(function() { 
     passwordPlaceholder.hide(); 
     passwordField.show(); 
     passwordField.focus(); 
    }); 
    // and vice versa: hide the actual password field if no password has yet been entered 
    passwordField.blur(function() { 
     if(passwordField.val() == '') { 
      passwordPlaceholder.show(); 
      passwordField.hide(); 
     } 
    }); 

    // when focus goes to and moves away from the fields, reset it to blank or restore the default depending if a value is entered 
    emailField.focus(function() { 
     if(emailField.val() == emailFieldDefault) { 
      emailField.val(''); 
     } 
    }); 
    emailField.blur(function() { 
     if(emailField.val() == '') { 
      emailField.val(emailFieldDefault); 
     } 
    }); 

     firstnameField.focus(function() { 
     if(firstnameField.val() == firstnameFieldDefault) { 
      firstnameField.val(''); 
     } 
    }); 
    firstnameField.blur(function() { 
     if(firstnameField.val() == '') { 
      firstnameField.val(firstnameFieldDefault); 
     } 
    }); 
      lastnameField.focus(function() { 
     if(lastnameField.val() == lastnameFieldDefault) { 
      lastnameField.val(''); 
     } 
    }); 
    lastnameField.blur(function() { 
     if(lastnameField.val() == '') { 
      lastnameField.val(lastnameFieldDefault); 
     } 
    }); 


}); 

Answer 1

只是得到一些佔位符插件，代碼重演太多，仍然不能做什麼，你需要

這正是你所需要的： http://plugins.jquery.com/project/input-placeholder

有了它，你的代碼看起來非常簡單明瞭，如：

<input type="text" name="first_name" placeholder="First Name" /> 
<input type="text" name="last_name" placeholder="Last Name" /> 
<input type="text" name="email_address" placeholder="Email" /> 


<script> 
    $(function(){ 
     $('input[placeholder]').placeholder(); 
    }) 
</script> 

而是所有的JavaScript

Answer 2

$('input[name=first_name]').val('First name'); 

這無條件設定該元素的以First Name值。它不是「只在空值時才設置值」，而是「將值設置爲First Name，而不管其名稱在哪裏」。

你會需要像這樣保存裏面有什麼了：

if ($('input[name=first_name]').val() == '') { 
    $('input[name=first_name]').val('First name'); 
} 

相反，如果它開始是空的，因爲這隻會重置該字段的值。

Answer 3

現成功能之前，你的默認值，您將可以設置一些值

$('input[name=first_name]').val('First name'); 
$('input[name=last_name]').val('Last name');  
$('input[name=email_address]').val('Email address'); 

讓你defalut值不能爲空

Answer 4

這是我應該怎樣做，所以這將是更具活力和更少的代碼。

<input type="text" name="first_name" rel="First Name" value="<?=$first_name?>" /> 
<input type="text" name="last_name" rel="Last Name" value="<?=$last_name?>" /> 
<input type="text" name="email" rel="Email" value="<?=$email?>" /> 



$(function(){ 
    $('input').each(function(){ 
     var val = $(this).val(), 
      rel = $(this).attr('rel'); 
     $(this).focus(function(){ 
      if(val === rel){ 
       $(this).val(''); 
      } 
     }); 
     $(this).blur(function(){ 
      if(val === ''){ 
       $(this).val(rel); 
      } 
     }); 
     if(val === ''){ 
      $(this).val(rel); 
     } 
    }); 
}); 

Answer 5

以最小的變化：

if($('input[name=first_name]').val()!='') 
    $('input[name=first_name]').val('First name'); 
if($('input[name=last_name]').val()!='') 
    $('input[name=last_name]').val('Last name'); 
if($('input[name=email_address]').val()!='') 
    $('input[name=email_address]').val('Email address'); 

另一個很酷的方式：

if($('input[name=first_name]').val()!='') { 
    $('input[name=first_name]').val('First name'); 
    $('input[name=first_name]').class('init'); 
} 
if($('input[name=last_name]').val()!='') { 
    $('input[name=last_name]').val('Last name'); 
    $('input[name=last_name]').class('init'); 

} 
if($('input[name=email_address]').val()!='') { 
    $('input[name=email_address]').val('Email address'); 
    $('input[name=email_address]').class('init'); 
} 

var initVals = new Array(); 
$("form input").each(function (i) { initVals[i] = this.value; }); 
$("form input").focus(function() { 
    if ($(this).hasClass("init") ){ 
     $(this).removeClass("init"); 
     $(this).val(""); 
    } 
}); 
$("form input").blur(function (i) { 
    if ($(this).val() == "" || $(this).val() == initVals[$("form input").index(this)]){   
     $(this).addClass("init"); 
     $(this).val(initVals[$("form input").index(this)]);  
    }; 
}); 

不要忘記使用hasClass（「初始化」）或類似的，以避免與它的默認值發送輸入。