HTML - 無效輸入並點擊外部時保持活動

我的問題如下。我有一個字段，用戶應該可以輸入一個數字，但只能在0-23之間。現在如果我輸入了一個有效的號碼，那沒問題，但是當我輸入一個無效號碼並在框外單擊時，文本會移回到原來的位置，從而疊加用戶輸入。我該如何解決這個問題，以便在輸入數字後文本保持不變？HTML - 無效輸入並點擊外部時保持活動

#whole { 
 
    bottom: 10px; 
 
} 
 

 
input { 
 
    width: 295px; 
 
    font-size: 18px; 
 
    padding: 10px 0px 10px 5px; 
 
    display: block; 
 
    border: none; 
 
    border-bottom: 1px solid #757575; 
 
} 
 
input:focus { 
 
    outline: none; 
 
} 
 
label { 
 
    color: #999; 
 
    font-size: 18px; 
 
    font-weight: normal; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    left: 5px; 
 
    top: 10px; 
 
    transition: 0.2s ease all; 
 
} 
 
/* active state */ 
 

 

 

 
.highlight { 
 
    position: absolute; 
 
    height: 60%; 
 
    width: 100px; 
 
    top: 25%; 
 
    left: 0; 
 
    pointer-events: none; 
 
    opacity: 0.5; 
 
} 
 
/* active state */ 
 

 
input:focus ~ .highlight { 
 
    animation: inputHighlighter 0.3s ease; 
 
} 
 
/* ANIMATIONS ================ */ 
 

 
@keyframes inputHighlighter { 
 
    from { 
 
     background: #5264AE; 
 
    } 
 
    to { 
 
     width: 0; 
 
     background: transparent; 
 
    } 
 
} 
 
input:focus ~ label, 
 
input:valid ~ label { 
 
    top: -20px; 
 
    font-size: 14px; 
 
    color: #5264AE; 
 
} 
 
select { 
 
    width: 300px; 
 
    font-family: inherit; 
 
    font-size: 18px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    padding-right: 30px; 
 
    display: block; 
 
    color: #999; 
 
    border: none; 
 
    border-bottom: 1px solid #757575; 
 
} 
 
select:focus { 
 
    outline: 0; 
 
}

<div id="whole"> 
 
    <form>  
 
    <div class="group"> 
 
     <input type="number" id="hour" min="0" max="23" required> 
 
     <label>Hour of the day (0-23)</label> 
 
    </div> 
 
    </form> \t \t \t \t \t 
 
</div>

來源

2017-03-07 lte__

可以處理與無效的選擇嘗試添加此的CSS

input:invalid ~ label { 
    top: -20px; 
    font-size: 14px; 
    color: #5264AE; 
}

嘗試使用了超範圍的選擇由this article

的建議

來源

2017-03-07 19:25:39

但是，如果我補充一點，由於空輸入也是無效的，它只是一直保持。 –

更新中......希望這有助於 –

它的確如此，謝謝！ –

HTML - 無效輸入並點擊外部時保持活動

回答

相關問題