Javascript 如果输入是焦点且在范围内，则添加类

我渴望在一段时间内用自动生成的输入解决我的问题。我在我的网站上使用Wordpress插件联系人表单7，我想在用户使用输入字段时设置标签的动画

当输入字段处于焦点或在其中键入内容时，活动类应显示在div中，类为“grid-3”

我尝试自己获取javascript，但它不起作用：

$('.wpcf7-form-control-wrap').each(function() {
  //console.log($(this));
  $(this).on('focus', function() {
    $(this).parent().parent().addClass('active');
  });

  $(this).on('blur', function() {
    if ($(this).val().length == 0) {
      $(this).parent().parent().removeClass('active');
    }
  });

  if ($(this).val() != '') $(this).parent('.grid-3').addClass('active');

});

HTML：

<div class="grid-3">
  <label for="schenkel2">Schenkel 2 in mm</label>
  <span class="wpcf7-form-control-wrap schenkel2">
    <input type="text" name="schenkel2" value="" size="40" class="wpcf7-form-control wpcf7-text" id="schenkel2" aria-invalid="false">
  </span>
</div>

申克尔2毫米

您是否为此使用CSS？ 我认为你可以很容易地用CSS3实现它

 <div class="grid-3">
 <label for="schenkel2">Schenkel 2 in mm</label>
 <span class="wpcf7-form-control-wrap schenkel2">
<input type="text" name="schenkel2" value="" size="40" class="wpcf7-form-control wpcf7-text inputHover" id="schenkel2" aria-invalid="false">

第一个是为文本区域添加默认样式，然后 第二个CSS是获得聚焦效果

---

将inputHover类添加到您的输入标记中，并检查您的逻辑是否正常，尽管我建议您沿着两个父节点爬行，直到找到您要查找的类为止。这样，它就不太可能因DOM的更改而中断。在vanilla javascript中，类似于以下内容的内容应该可以完成这项工作。请注意，它使用了您可能需要为旧版本的IE填充的多边形

/**
*向上遍历DOM树以获取具有匹配类的父元素
*要从中搜索的@param{Element}元素
*@param{string}用于标识目标父级的类名
*@return{Element}targetClass或null为的父元素到达DOM树的顶部
**/
函数getTargetParent（元素，targetClass）{
var currElem=elem；
当(
库雷姆
&&！currElem.classList.contains（targetClass）
) {
currElem=currElem.parentNode；
}
返回电流；
}
/**
*将焦点事件侦听器添加到元素，以便在targetClass标识的父级上添加“焦点”类
**/
函数addFocusListener（元素，targetClass）{
var targetParent=getTargetParent（元素，targetClass）；
if（targetParent）{
元素addEventListener（'focus'，function（）{
targetParent.classList.add（'focus'）；
});
元素addEventListener（'blur'，function（）{
targetParent.classList.remove（'focus'）；
});
}
}
var inputs=document.getElementsByClassName（'wpcf7-form-control'）；
对于（变量i=0；i

.focus{
颜色：红色；
}

申克尔2毫米

为什么需要在focus上添加一个类？是改变造型吗？如果是这样的话，

：focus

伪类就是为这种情况而创建的。不幸的是：focus伪类目前无法完成此操作，因为它只对输入工作（因为它有焦点），但OP希望编辑同级元素。看起来我们将能够使用<代码>！。grid-3输入：悬停{…}

input[type=text], textarea {
 -webkit-transition: all 0.30s ease-in-out;
 -moz-transition: all 0.30s ease-in-out;
 -ms-transition: all 0.30s ease-in-out;
 -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}

#inputHover:focus {
  box-shadow: 0 0 5px #EC8937;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #EC8937;
}