Ajouter une classe si l'entrée est active et dans une plage

Question

Je meurs d'envie de résoudre mon problème avec une entrée générée automatiquement dans une plage. J'utilise le formulaire de contact plugin Wordpress 7 sur mon site et je veux tellement animer l'étiquette lorsque l'utilisateur utilise le champ de saisie. Lorsque le champ de saisie est actif ou que quelque chose est tapé, la classe active doit apparaître dans la div avec la classe "grid-3".

J'ai essayé de le javascript moi-même, mais il ne marche fonctionne:

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

}); 

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

Utilisez-vous CSS pour cela? Je pense que u peut atteindre facilement avec 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; 
} 

ci-dessus première est d'ajouter les styles par défaut pour une zone de texte et deuxième CSS est d'obtenir le sur l'effet de mise au point ajoutez la classe inputHover dans votre tag d'entrée et vérifiez

Answer 2

Votre logique semble bonne, bien qu'au lieu de remonter deux nœuds parents, je suggérerais d'explorer l'arborescence DOM jusqu'à ce que vous trouvez la classe que vous recherchez. De cette façon, il est moins susceptible de rompre avec les modifications apportées au DOM. En vanilla javascript quelque chose comme le suivant devrait faire le travail. Notez qu'il utilise classList que vous devrez peut-être polyfiller pour les anciennes versions d'Internet Explorer.

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