如果输入是焦点且位于范围中，则添加类

Question

我迫不及待地想解决在span中自动生成输入的问题。我在我的网站上使用了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>

Answer 1

您的逻辑看起来不错，不过我建议您沿着DOM树向上爬行，直到找到您要查找的类。这样就不太可能破坏对DOM的更改。在vanilla javascript中，类似下面这样的代码就可以完成这项工作。请注意，它使用的是classList，对于旧版本的IE，您可能需要对其进行多填充。

​

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

上面的第一个是添加文本区域的默认样式，第二个是获得焦点效果，将inputHover类添加到您的输入标记中并检查