时间戳

首页 > 解决方案 > 尝试创建像文本框这样的材料设计，输入验证问题

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

问题描述

我正在尝试创建一个受材料设计启发的文本框。

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

这是我的页面样式表 -

.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>

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

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

我在想'输入：有效'将有助于防止它发生，但它没有。我可以用 javascript 解决这个问题，但是有没有不使用 js 的方法？

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

如果我应该进一步解释，请告诉我。

标签： csshtmlmaterial-design

解决方案

我相信这需要使用 javaScript。如果您不想使用 javascript，只需将标签保留在 textField 顶部，或者仅使用占位符。

使用 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);
    }
}

该函数检查 textField 是否为空。如果是，则删除 的类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;
 }

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

推荐阅读