添加班級如果輸入焦點和跨度

我渴望解決我的問題與自動生成輸入跨度。我在我的網站上使用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

添加班級如果輸入焦點和跨度

回答

相關問題