當輸入有文字時更改標籤樣式

當輸入沒有輸入時，我想隱藏我的標籤，因爲我有佔位符文本，但一旦輸入，我希望通過更改不透明度來顯示輸入。當輸入有文字時更改標籤樣式

label { 
 
    display: block; 
 
    color:rgba(146,20,34,0); 
 
    text-align: left; 
 
    margin: 0; 
 
    padding-left: 12.2%; 
 
    font-size: 75%; 
 
}

<label for="name">Full Name</label> 
 
<input type="text" name="name" placeholder="Full Name" id="name" value=""> 
 
<br> 
 
<label for="customerNum">Customer Number</label> 
 
<input type="number" name="customerNum" placeholder="Customer Number" value="">

來源

2016-12-20 JDB

您必須使用JS，您無法使用CSS檢查輸入的值 –

我是否必須爲每個輸入及其標籤分別具有不同的功能，或者有沒有辦法讓它檢測正在輸入的輸入？ – JDB

看看這個http://stackoverflow.com/a/35593489/630203答案....實際上等待可能是錯誤的方式 - 你需要設置默認樣式，因爲你想要他們與文本，然後覆蓋文本框爲空時 – Djave

你只需要一類/屬性，以便添加到標籤，以確定它是否隱藏或不。然後，用JS檢查輸入是否通過input事件輸入。

const inputs = document.querySelectorAll('input[type="text"]'); 
 

 
[].forEach.call(inputs, input => { 
 
    const label = document.querySelector(`[for="${input.id}"]`); 
 
    input.addEventListener('input', function() { 
 
\t if (this.value && this.value.length > 0) { 
 
    \t label.removeAttribute('hidden'); 
 
    } else { 
 
    \t label.setAttribute('hidden', ''); 
 
    } 
 
    }); 
 
});

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background-color: #fff; 
 
    padding: 50px 50px; 
 
} 
 
.group { 
 
    display: inline-block; 
 
    width: 200px; 
 
} 
 
.group label, .group input { 
 
    display: block; 
 
    font-family: 'open sans'; 
 
    transition: all .23s ease; 
 
    width: 100%; 
 
} 
 
.group label { 
 
    color: #555; 
 
    font-size: 15px; 
 
    font-weight: 600; 
 
} 
 
.group input { 
 
    border: 1px solid #ddd; 
 
    border-radius: 3px; 
 
    color: #555; 
 
    font-size: 14px; 
 
    height: 35px; 
 
    margin-top: 5px; 
 
    padding: 0 8px; 
 
} 
 
.group input:focus { 
 
    border-color: #00bbff; 
 
    box-shadow: 0 0 5px 1px rgba(0,188,255,.25); 
 
    outline: none; 
 
} 
 
label[hidden] { 
 
    opacity: 0; 
 
    visibility: hidden; 
 
}

<div class="group"> 
 
    <label hidden for="name">Full name</label> 
 
    <input type="text" id="name" placeholder="Enter your full name"> 
 
</div> 
 
<div class="group" style="float: right"> 
 
    <label hidden for="address">Address</label> 
 
    <input type="text" id="address" placeholder="Enter address"> 
 
</div>

來源

2016-12-20 13:39:28

謝謝，那正是我想要的。有沒有一種簡單的方法可以擴展到更多的輸入和標籤，或者我必須爲每一個都寫類似的功能？ – JDB

當然@JDB。檢查我的更新。 –

謝謝，這非常有幫助！ – JDB

添加<script>標記HTML中，並使用以下的javascript：

function setVisible(text) { 
    var labels = document.getElementsByTagName("LABEL"); 
    for(var i = 0; i < labels.length; i++) { 
     if(labels[i].innerHTML == text) { 
      labels[i].style.color = "black"; 
     } 
    } 
}

添加onchange屬性對您的輸入：

onchange="setVisible(this.placeholder)"

最終結果小號HOULD這個樣子的：

label { 
 
    display: block; 
 
    color:rgba(146,20,34,0); 
 
    text-align: left; 
 
    margin: 0; 
 
    padding-left: 12.2%; 
 
    font-size: 75%; 
 
}

<label for="name">Full Name</label> 
 
<input type="text" name="name" placeholder="Full Name" id="name" value="" onchange="setVisible(this.placeholder)"> 
 
<br> 
 
<label for="customerNum">Customer Number</label> 
 
<input type="number" name="customerNum" placeholder="Customer Number" value="" onchange="setVisible(this.placeholder)"> 
 

 
<script> 
 
    function setVisible(text) { 
 
    var labels = document.getElementsByTagName("LABEL"); 
 
     for(var i = 0; i < labels.length; i++) { 
 
    \t   if(labels[i].innerHTML == text) { 
 
    \t  labels[i].style.color = "black"; 
 
      } 
 
     } 
 
    } 
 
</script>

來源

2016-12-20 13:41:14

這裏是一個CSS只能回答只是因爲它可能會感興趣。

body{ padding:10px; } 
 
input:placeholder-shown + label { 
 
    border: 2px solid red; /* Red border only if the input is empty */ 
 
}

<input type="text" name="name" placeholder="Full Name" id="name" value=""> 
 
<label for="name">Full Name</label> 
 
<br> 
 
<input type="number" name="customerNum" placeholder="Customer Number" value=""> 
 
<label for="customerNum">Customer Number</label>

然而，有一個問題，它依賴於交換輸入和標籤的順序。

來源

2016-12-20 14:12:01 Djave

當輸入有文字時更改標籤樣式

回答

相關問題