为什么输入为空时输入：无效为真？

Question

目前我正在尝试模仿this 示例。这很好用，但是它有一个很大的限制：它仅在您的输入类型是文本时才有效。

当您使用另一种输入类型（例如电子邮件）时，基本字符串无效，因此占位符会覆盖文本。

所以在我看来，这个问题有解决办法：

1. 在任何地方都使用 type=text，这有点糟糕，因为例如在手机上，您将无法使用电子邮件类型的键盘。
2. 使用 JavaScript 检查输入是否有值。

我希望我遗漏了一些东西，并且还有另一个例子可以实现我想要的。在完美世界中，不会验证空输入，因此占位符将显示其正常状态。然后当用户填写任何类型的数据时，验证将开始。纯 CSS 可以做到这一点吗？

谢谢大家！

HTML：

<fieldset id="fieldset1">
    <input type="text" required />
    <label>First name</label>
</fieldset>
<fieldset id="fieldset2">
    <input type="email" required />
    <label>Email address</label>
</fieldset>

CSS：

fieldset {
    position: relative;
    margin:40px 0 0 0;
    padding:0;
    border:none;
}
fieldset input {
    height: 2.5rem;
    line-height: 2.25rem;
    padding: 0 0.9375rem;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    border: none;
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background: #9a9a9a;
    display: block;
    width: 100%;
    border: 2px solid transparent;
    -webkit-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
    border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
}
fieldset label {
    position: absolute;
    color: white;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: bold;
    -webkit-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
    line-height: 2.5rem;
    left: 0.9375rem;
    top: 0;
    display: block;
    text-align: left;
}
fieldset input:focus + label, 
fieldset input:valid + label {
    top: -1.875rem;
    color: black; 
}

我做了一个JSFiddle来说明我的问题，查看here

编辑：由于 1l13v 不清楚我想要实现什么，我会重复一遍：我知道字符串不是有效的电子邮件地址，所以我现在的解决方案永远不会与任何其他输入类型一起使用比文字。

我想实现这个：

1. 有一个纯 CSS 的解决方案来检查输入是否有任何值。如果它为空，我可以在其正常位置显示占位符，如果不是，我可以在输入上方显示占位符。
2. 进行输入[type="email"]:invalid make return false 当输入完全为空。

如果这两种解决方案都不可行，我认为我唯一的解决方案是切换到 Javascript 来解决我的问题，除非有我忘记的解决方案。我希望我忘记了一些事情，我不想避免使用 Javascript 来解决这个问题。

我用这个作为我的解决方案：

function checkInputValue() {
    if($(this).val() !== ''){
        $(this).parents('fieldset').addClass('valid');
    } else {
        $(this).parents('fieldset').removeClass('valid');
    }
};

$('.input1').on('blur', checkInputValue); // Check if input has a value

Answer 1

您的问题是您输入普通文本并且您希望电子邮件标签EMMAIL ADDRESS 上升，但是当您失去该输入电子邮件的焦点时不会发生这种情况，因为您离开后输入文本无效，即你的文字不像：email@something.com

除非您的输入是有效的电子邮件，否则这永远不会应用：

fieldset input:valid + label {
    top: -1.875rem;
    color: black; 
}

关于输入邮箱：

根据浏览器的支持，电子邮件地址可以自动 提交时验证。

某些智能手机会识别电子邮件类型，并将“.com”添加到 键盘以匹配电子邮件输入。

更新

如果您仍然想将标签放在电子邮件上方，尽管它的值不是有效的电子邮件，那么您必须使用 javascript。

使用 jQuery 试试这段代码：

var emailInput = $('#fieldset2 > input');
var label = $('#fieldset2 > label');

    emailInput.blur( function(){
    if(emailInput.val() !== ''){
        label.addClass('valid');
    } else {
        label.removeClass('valid');
    }
});

还有这个 css 类：

.valid {
    top: -1.875rem;
    color: black; 
}

即与您的字段集标签相同的规则

看到这个fiddle