如何在純javascript中改變輸入焦點上的標籤顏色？

Question

我有兩個輸入框內的絕對位置div。還有這些輸入框上的標籤。我想要的效果是，當我關注一個輸入框時，標籤應該是藍色，當模糊時應該去掉該類（藍色）。同時還有另一個標籤和輸入框。

// Initial color of label 
 
label.labels{ 
 
    color: black; 
 
} 
 

 
input.box{ 
 
    border-width: 0 0 2px 0; 
 
    outline: none; 
 
}

<div style = "position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;"> 
 
    <label class = "labels">First Name:</label> 
 
    <input type = "text" class = "box" /><br /> 
 
    <label class = "labels">Last Name:</label> 
 
    <input type = "text" class = "box" /> 
 
</div>

當我聚焦input.box然後label.labels顏色應該是藍色。而且，輸入和標籤都具有相同的類別。如何用純Javascript實現這種效果？或者如果可能的話，請告訴我如何用CSS實現這一點？

Answer 1

下面是使用純JavaScript的解決方案：

function toggleClass() { 
 
    this.previousElementSibling.classList.toggle('imblue'); 
 
} 
 

 
var inputs = document.getElementsByClassName('box'); 
 

 
for (var i = 0; i < inputs.length; i++) { 
 
    var input = inputs[i]; 
 

 
    input.addEventListener('focus', toggleClass); 
 
    input.addEventListener('blur', toggleClass); 
 
}

label.labels { 
 
    color: black; 
 
} 
 

 
input.box { 
 
    border-width: 0 0 2px 0; 
 
    outline: none; 
 
} 
 

 
.imblue { 
 
    color: blue !important; 
 
}

<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;"> 
 
    <label class="labels">First Name:</label> 
 
    <input type="text" class="box" /><br /> 
 
    <label class="labels">Last Name:</label> 
 
    <input type="text" class="box" /> 
 
</div>

Answer 2

使用:focus-within僞元素的css解決方案。請注意，這在IE/Edge中不受支持。

您需要將每個label和input對包裝起來才能使用。

// Initial color of label 
 
label.labels { 
 
    color: black; 
 
} 
 

 
input.box { 
 
    border-width: 0 0 2px 0; 
 
    outline: none; 
 
} 
 

 
.field:focus-within .labels { 
 
    color: blue; 
 
}

<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;"> 
 
    <div class="field"> 
 
    <label class="labels">First Name:</label> 
 
    <input type="text" class="box" /><br /> 
 
    </div> 
 
    <div class="field"> 
 
    <label class="labels">Last Name:</label> 
 
    <input type="text" class="box" /> 
 
    </div> 
 
</div>