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

Question

我很想通过跨度自动生成的输入来解决我的问题。我在我的网站上使用 Wordpress 插件 Contact Form 7，我希望在用户使用输入字段时为标签设置动画。

当输入字段处于焦点或在其中键入内容时，活动类应出现在具有“grid-3”类的 div 中。

我尝试自己获取 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>

Answer 1

您的逻辑看起来不错，虽然不是向上走两个父节点，但我建议爬上 DOM 树，直到找到您要查找的类。这样它就不太可能因 DOM 的更改而中断。在 vanilla javascript 中，类似以下内容应该可以完成这项工作。请注意，它使用classList，您可能需要为旧版本的 IE 进行 polyfill。

/**
* Walk up DOM tree to get parent element with the matching class
* @param {Element} Element to search from
* @param {string} The class name to identify target parent
* @return {Element} The parent element with targetClass or null of we reach the top of the DOM tree
**/
function getTargetParent(elem, targetClass) {
    var currElem = elem;
    while(
  	  currElem
  	  && !currElem.classList.contains(targetClass)
    ) {
    	currElem = currElem.parentNode;
    }
    return currElem;
}

/**
* Add a focus event listener to an element to add "focus" class on the parent identified by targetClass
**/
function addFocusListener(elem, targetClass) {
  var targetParent = getTargetParent(elem, targetClass);
  if(targetParent) {
		elem.addEventListener('focus', function() {
	    targetParent.classList.add('focus');
    });
    elem.addEventListener('blur', function() {
    	targetParent.classList.remove('focus');
    });
  }
}

var inputs = document.getElementsByClassName('wpcf7-form-control');
for(var i = 0; i < inputs.length; i++) {
	addFocusListener(inputs[i], 'grid-3');
}

.focus {
  color: red;
}

<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>

Answer 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">

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

上面的第一个是为文本区域添加默认样式和 第二个CSS是为了获得焦点效果 将 inputHover 类添加到您的 Input 标签中并检查