입력이 포커스이고 스팬 인 경우 클래스 추가

Question

스팬의 자동 생성 된 입력으로 내 문제를 해결하고 싶습니다. 저는 Wordpress 플러그인을 사용하고 있습니다. 내 웹 사이트에서 양식 7에 문의하십시오. 사용자가 입력 필드를 사용하는 동안 라벨에 애니메이션을 적용하고 싶습니다.

입력란에 포커스가 있거나 그 안에 무엇인가가 입력되면 class class가 "grid-3"인 div에 active 클래스가 나타납니다.

나는 자바 스크립트 나 자신을 얻기 위해 노력하지만 나던 작동 :

$('.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

이를 위해 CSS를 사용하십니까? 내가 u는 첫 번째 위 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 클래스를 입력 태그에 추가하고 확인하십시오.

Answer 2

두 개의 상위 노드를 거치지 않고도 로직이 정상적으로 보일 때까지 DOM 트리를 크롤링하는 것이 좋습니다. 찾고있는 수업을 찾으십시오. 그렇게하면 DOM 변경으로 인해 문제가 발생할 가능성이 줄어 듭니다. 바닐라 자바 ​​스크립트에서 다음과 같은 일을해야합니다. 이전 버전의 IE에서는 polyfill해야 할 수도있는 classList을 사용합니다.

/** 
 
* 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(
 
    \t currElem 
 
    \t && !currElem.classList.contains(targetClass) 
 
    ) { 
 
    \t 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) { 
 
\t \t elem.addEventListener('focus', function() { 
 
\t  targetParent.classList.add('focus'); 
 
    }); 
 
    elem.addEventListener('blur', function() { 
 
    \t targetParent.classList.remove('focus'); 
 
    }); 
 
    } 
 
} 
 

 
var inputs = document.getElementsByClassName('wpcf7-form-control'); 
 
for(var i = 0; i < inputs.length; i++) { 
 
\t 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>