javascript - 如何在一个字母后输入无效
问题描述
你好
这是我的输入
.centered-name
{
width: 80%;
margin: auto;
}
.group {
width: 100%;
overflow: hidden;
position: relative;
}
.label {
position: absolute;
top: 40px;
color: #666666;
font: 400 26px Roboto;
cursor: text;
transition: 0.3s ease;
width: 100%;
text-align: center;
}
.input {
display: block;
width: 100%;
padding-top: 36px;
border: none;
border-radius: 0;
font-size: 30px;
transition: .3s ease;
text-align: center;
}
.input:valid ~ .label
{
top: 3px;
font: 400 26px Roboto;
}
.input:focus {
outline: none;
}
.input:focus ~ .label {
top: 3px;
font: 400 26px Roboto;
}
.input:focus ~ .bar:before {
transform: translateX(0);
}
.bar {
border-bottom: 2px solid #ff5126;
width: 100%;
margin-top: 6px;
transition: .3s ease;
}
.input:valid ~ .bar
{
border-bottom: 2px solid #3bb873;
}
<div class="centered-name">
<div class="group">
<input type="text" minlength="5" dir="rtl" class="input res" id="name" required autocomplete="off" />
<label class="label res" for="name">Name</label>
<div class="bar"></div>
</div>
</div>
什么时候是无效的并且你写了一些东西(少于 5 个字母)并且它失去了焦点,标签会掉下来
我也试试
.input:invalid ~ .label
{
top: 3px;
font: 400 26px Roboto;
}
.centered-name
{
width: 80%;
margin: auto;
}
.group {
width: 100%;
overflow: hidden;
position: relative;
}
.label {
position: absolute;
top: 40px;
color: #666666;
font: 400 26px Roboto;
cursor: text;
transition: 0.3s ease;
width: 100%;
text-align: center;
}
.input {
display: block;
width: 100%;
padding-top: 36px;
border: none;
border-radius: 0;
font-size: 30px;
transition: .3s ease;
text-align: center;
}
.input:valid ~ .label
{
top: 3px;
font: 400 26px Roboto;
}
.input:invalid ~ .label
{
top: 3px;
font: 400 26px Roboto;
}
.input:focus {
outline: none;
}
.input:focus ~ .label {
top: 3px;
font: 400 26px Roboto;
}
.input:focus ~ .bar:before {
transform: translateX(0);
}
.bar {
border-bottom: 2px solid #ff5126;
width: 100%;
margin-top: 6px;
transition: .3s ease;
}
.input:valid ~ .bar
{
border-bottom: 2px solid #3bb873;
}
<div class="centered-name">
<div class="group">
<input type="text" minlength="5" dir="rtl" class="input res" id="name" required autocomplete="off" />
<label class="label res" for="name">Name</label>
<div class="bar"></div>
</div>
</div>
但在我们写任何东西之前,标签再次上升
写信后如何输入无效?
解决方案
您遇到的问题是因为您“滥用”对样式有效
您可以将其更改为使用:placeholder-shown https://caniuse.com/#feat=css-placeholder-shown
如果您在第一个示例中进行更改
.input:focus ~ .label {
top: 3px;
font: 400 26px Roboto;
}
类似于
.input:not(:placeholder-shown) ~ .label {
top: 3px;
font: 400 26px Roboto;
}
.input::placeholder {
color: transparent;
}
并为您的输入标签添加一个占位符
推荐阅读
- kotlin - 在 Kotlin 中访问私有方法
- javascript - Django Channels - 拒绝未经授权的 websocket 请求的正确方法?
- node.js - 验证控制器中的用户输入并使用猫鼬模式验证器
- typescript - 将 mixin 声明为类型而不是变量
- r - 使用 pheatmap 在 r 中重塑热图的问题
- postgresql - 一对多关系的外键
- reactjs - WebRTC 视频流在 Firefox 中工作,但在 chrome 中不工作
- flutter - 动画从左到右水平,但我想要垂直(从上到下)
- mongodb - Mongodb 没有从 4.2 正确更新到 4.4
- python - mysql.connector.errors.InterfaceError:没有要从中获取的结果集