html - 为什么输入:invalid true when the input is empty?

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 当输入完全为空时返回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; 
}

关于输入邮件:

Depending on browser support, the e-mail address can be automatically validated when submitted.

Some smartphones recognize the email type, and adds ".com" to the keyboard to match email input.

更新

如果您仍然希望在电子邮件上方添加标签，尽管它的值不是有效的电子邮件，那么您必须使用 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