css - 尝试创建像文本框这样的 Material 设计，输入验证问题

Question

我正在尝试创建受 Material 设计启发的文本框。

我已经阅读了类似的问题/答案。但是，我的问题略有不同，请继续阅读。

这是我的页面样式表 -

.textBoxContainer{
height:50px;
position:relative;
margin:20px;
}

.textbox{
    border-bottom: solid 2px #984343;    
    border-top: none;
    border-left: none;
    font-family: Candara;
    width: 30%;
  }

.textbox + .lbl{
position:absolute;
top:0px;
left:0px;
transition:all .2s ease-out;
}

.textbox:focus{
 border-bottom: solid 2px #4CAF50;
  outline:none;    
}

 .textbox:focus + label, input:valid+label{
 top:-15px;
 font-size:10px;
 }

这是我要创建的文本框 -

<div class='textBoxContainer'>
<input class='textbox' type="text" />
<label class='lbl'>
phone no....
</label>
</div>

它工作得很好，就像受 Material 设计启发的文本框一样，文本在输入时向上移动。

但是，在输入完成后，如果我移出文本框，标签会再次折叠回文本框。

我原以为“input:valid”会有助于防止它发生，但事实并非如此。 我可以用 javascript 解决这个问题，但是有没有不使用 js 的方法？

我也尝试过在输入字段中添加“必需”，但这也无济于事。

如果我需要进一步解释，请告诉我。

Answer 1

我相信这需要使用 javaScript。如果您不想使用 javascript，只需将标签保留在文本字段的顶部，或者只使用占位符即可。

使用 JavaScript 实现它的方法如下:

将 onfocusout 事件监听器添加到您希望该标签保留的所有文本字段。

<input class='textbox' type="text" onfocusout="leaveFocus(event)" />

接下来，您必须创建每次 textField 失去焦点时调用的函数。

function leaveFocus(event) {

    const textField = event.target;
    // Check if textField is empty
    if (textField.value !== '') {
        textField.classList.add('has-text);
    } else {
        // Otherwise, textFiled has text
        textField.classList.remove('has-text);
    }
}

该函数检查文本字段是否为空。如果是，则删除 has-text 类，如果有文本，则添加 has-text 类。

现在在您的 css 中，您必须将 has-text 添加到标签向上的所有样式中，如下所示:

.textbox:focus, .has-text{
     border-bottom: solid 2px #4CAF50;
     outline:none;    
}

 .textbox:focus + label, .has-text + label, input:valid+label{
     top:-15px;
     font-size:10px;
 }

如果这回答了您的问题，请告诉我；如果您需要更多帮助，请告诉我。