时间戳

首页 > 解决方案 > 在输入的焦点上添加一个类，而不是单击

jquery - 在输入的焦点上添加一个类，而不是单击

问题描述

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

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

小提琴：https ://jsfiddle.net/j71ghw2b/4/

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');
        });
    });

标签： jquery

解决方案

您不需要使用.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>

推荐阅读