Question

我有这个问题。在jQuery中我有这样的事情：当你开始在输入中写入时，“name_placeholder”变得更小并且更改，因为它获得了新的类，但我有一些PHP和SQL，所以提交后，它“刷新”和“name_placeholder”即使它不应该回到它的位置。

所以基本上...当输入为空时，“name_placeholder”没有类，在输入时任何文本“name_placeholder”都会获得名为“active”的新类，但是当你提交表单时，页面刷新，但是PHP的东西，表单仍然填充，所以“name_placeholder”应该有名为“active”的类，但它没有。你能救我吗？

<input type="text" name="name" class="name" value="<?php value('name') ?>" />
<p class="name_placeholder">Your name</p><?php name() ?>

$(document).ready(function() {
  $('.name').on('input', function() {
    if ($(this).val() === '') {
      $('.name_placeholder').removeClass('active');
    } else {
      $('.name_placeholder').addClass('active');
      }
  });
});

顺便说一句。忽略那些PHP的东西，只是当你填错时，值将保留在那里并且不会被删除

Answer 1

您编写的回调在文本框的输入上执行：

$('.name').on('input', ....)

您必须在页面加载和输入时执行它。最好的方法是将回调分离为一个单独的函数：

function test() {
    if ($('.name').val() === '') {
      $('.name_placeholder').removeClass('active');
    } else {
      $('.name_placeholder').addClass('active');
    }
}    

$(document).ready(test); // executes at page load
$('.name').on('input', test); // executes at every input

Answer 2

您可以通过以下两种方式（或三种方式）完成此任务：

A）在构建输出时用PHP处理它。如果它有一个值，请添加该类。

<input type="text" name="name" class="name" value="<?php value('name');?>" />
<p class="name_placeholder<?php echo (name()?' active':'');?>">Your name</p><?php name();?>

或者

B）调整你的js以检查你的输入并确定它是否有值并添加该类。

$(document).ready(function() {
    if ($('.name').val() !== '') {
        $('.name_placeholder').addClass('active');
    }
    $('.name').on('input', function() {
        if ($(this).val() === '') {
            $('.name_placeholder').removeClass('active');
        } else {
            $('.name_placeholder').addClass('active');
        }
    });
});

或者

但是，如果你想大规模处理上面的内容（你有多个输入和不同的名称），你可以调整你的代码：

<input type="text" name="name" class="name hyperactive" value="<?php value('name');?>" />
<p class="name_placeholder">Your name</p><?php name();?>
<input type="text" name="email" class="email hyperactive" value="<?php value('email');?>"/>
<p class="email_placeholder">Your email</p><?php email();?>

JS：

function hyperActive(item) {
    if (item.val() === '') {
        $('.'+ item.attr('name') +'_placeholder').removeClass('active');
    } else {
        $('.'+ item.attr('name') +'_placeholder').addClass('active');
    }
}
$(document).ready(function() {
    // both of these MUST be in your .ready block

    // the following will handle them all on page load to setup classes
    $(".hyperactive").each(function(){
        hyperActive( $(this) );
    });

    // the following then handles the action events on input typing
    $('.hyperactive').on('input', function() {
        hyperActive( $(this) );
   });
});

请确保您的每个*_placeholder都被命名为与其绑定的input name匹配，并且它将仅使用该代码处理所有元素。

jquery函数在页面刷新后停用，即使它不应该

2 个答案: