为什么输入为空时，input:invalid为true？

Question

目前我正在尝试仿照这个示例。它工作得很好，但是有一个很大的限制：它只能在输入类型为文本时使用。

当您使用另一种输入类型，比如电子邮件时，基本字符串无效，因此占位符会掉落在文本上。

所以在我看来，解决这个问题有两种方案：

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. 当输入完全为空时，使input[type="email"]:invalid返回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

- DavidWorldpeace

---

@1l13v 添加了代码！ - undefined

Answer 1

你的问题是你输入了普通文本，而你希望电子邮件标签电子邮件地址上移，但是当你失去焦点时，这种情况并没有发生，因为在你离开输入框后，输入的文本不是有效的，即你的文本不像这样：[e-mail]

除非你的输入是一个有效的电子邮件地址，否则这将永远不会应用：

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

- Kristijan Iliev

---

谢谢，我只打算用一些JavaScript来工作，因为我猜单靠CSS是不行的。真可惜。 - undefined