添加班级如果输入焦点和跨度

我渴望解决我的问题与自动生成输入跨度。我在我的网站上使用Wordpress插件联系表单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>

来源

2016-11-06 Denis S.

为什么你需要添加焦点一类？它是否改变样式？如果是这样的话，'：focus'伪类就是为这样的场合而制作的 –

你使用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标签中，然后检查

来源

2016-11-22 06:51:52

这个遗憾的是目前不能用：focus伪类来完成，因为它只能在输入上工作（因为它有焦点），但是OP想要编辑同级元素。虽然看起来我们可以使用[CSS Level 4 Selectors]（https://www.w3.org/TR/selectors4/#subject）。 '！.grid-3 input：hover {...}' – elvey

你的逻辑看起来很好，但是我们建议爬到DOM树上直到你找到你正在寻找的课程。这样就不太可能打破DOM的变化。在香草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(
 
    \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>

来源

2016-11-22 07:25:13 elvey

添加班级如果输入焦点和跨度

回答

相关问题