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 - 无效输入并点击外部时保持活动

回答

相关问题