Question

我创建了一个不错的小输入字段，该字段在单击时将标签字段推到了输入上方。我尝试将JS更改为“ focus”，但是它不起作用。

我需要这样做，以便当人们从一个字段切换到另一个字段时，具有相同的效果。

HTML：

<div class="form-row">
     <label>Your email</label><br>
     <span class="wpcf7-form-control-wrap name-text"><input type="text" name="name-text" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span>
</div>

JS：

$( ".form-row" ).each(function() {
        $(this).on("click", function(){
            $(this).addClass('active-field');
        });
    });

Answer 1

您不需要使用.each()循环。

只需在输入中监听focus事件，然后将类添加到closest() .form-row。

$(".form-row input").on('focus', function() {
  $(this).closest(".form-row").addClass('active-field');
});

.active-field{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-row">
     <label>Your email</label><br>
     <span class="wpcf7-form-control-wrap name-text"><input type="text" name="name-text" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span>
</div>

Answer 2

检查以下内容：https://jsfiddle.net/j71ghw2b/13/

$( ".form-row input" ).on("focus click", function(){
  $(this).parent().parent().addClass('active-field');
});

每个都不需要。事件focus仅适用于输入。

在输入焦点上添加类，而不是单击

2 个答案: