[英]Hide the validation output mark (✘) symbol hide when page is loaded/reloaded
我使用下面的代碼與輸入框上的HTML5模式匹配和CSS3 :invalid
和:valid
偽選擇器在輸入框旁邊的div.input-validation
顯示驗證的輸出(有效值與否) 。 這按預期工作,但它在頁面加載本身和重新加載頁面時顯示驗證標記(✘ - 無效輸入)。 我該怎樣避免這個?
碼:
<style type="text/css">
input {
font-size: 1em;
padding: .3em;
border-radius: 3px;
margin: .2em;
}
input[type="text"]:valid {
color: green;
}
input[type="text"]:valid ~ .input-validation::before {
content: "\2714";
color: green;
}
input[type="text"]:invalid ~ .input-validation::before {
content: "\2718";
color: red;
}
.input-validation {
display: inline-block;
}
</style>
<?echo $passwordregister;?>
<input name="pw" autocomplete="off" type="text" id="pw" pattern="[a-zA-Z0-9]{6,22}" autofocus required >
<div class="input-validation"></div>
您可以使用以下任一選項隱藏頁面加載時的無效值(✘)符號。
選項1:隱藏包含頁面加載符號的span
,並僅在輸入文本框上發生某些keypress
事件時顯示。
window.onload = function() { var el = document.querySelectorAll("input[type='text']"); for (var i = 0; i < el.length; i++) { el[i].onkeypress = showSymbol; } function showSymbol() { this.nextElementSibling.style.display = "inline-block"; // display the span next to the input in which key was pressed. } }
input { font-size: 1em; padding: .3em; border-radius: 3px; margin: .2em; } input[type="text"]:valid { color: green; } input[type="text"]:valid + .input-validation::before { content: "\\2714"; color: green; } input[type="text"]:invalid + .input-validation::before { content: "\\2718"; color: red; } .input-validation { display: none; }
<input name="pw" autocomplete="off" type="text" id="pw" class="new" pattern="[a-zA-Z0-9]{6,22}" autofocus required/> <span class="input-validation"></span>
選項2:根據某些類(比如visited
)的存在定義CSS規則,並僅在輸入框中按下某個鍵時分配此類。
window.onload = function() { var el = document.querySelectorAll("input[type='text']"); for (var i = 0; i < el.length; i++) { el[i].onkeypress = showSymbol; } function showSymbol() { this.classList.add("visited"); // add the visited class } }
input { font-size: 1em; padding: .3em; border-radius: 3px; margin: .2em; } input[type="text"].visited:valid { color: green; } input[type="text"].visited:valid + .input-validation::before { content: "\\2714"; color: green; } input[type="text"].visited:invalid + .input-validation::before { content: "\\2718"; color: red; } .input-validation { display: inline-block; }
<input name="pw" autocomplete="off" type="text" id="pw" class="new" pattern="[a-zA-Z0-9]{6,22}" autofocus required/> <span class="input-validation"></span>
注意:
~
在你的CSS選擇器+
因為~
選擇選擇器而匹配所有的兄弟姐妹+
只選擇相鄰的兄弟。 只要在第一個輸入框中輸入值,使用~
將使所有輸入框旁邊的span
顯示(當表單中有多個輸入框時)。 div
到span
的.input-validation
,但這更像是個人偏好,你可以保留原來的div
本身而不會有任何功能上的差異。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.