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

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

这无条件地将该元素的值设置为First Name。它不是“只设置值，如果它是空的”，它“将值设置为名字，无论它在那里是什么”。

你需要这样的东西来保存那里的东西：

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

相反，只有在字段开始为空时才会重置字段的值。

Answer 2

只需获得一些占位符插件，您的代码会重复太多而仍然无法满足您的需求

这正是您所需要的： 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 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（“init”）或类似内容来避免使用默认值发送输入。

Jquery附加输入值 - 验证后不显示输入的值

5 个答案: