Question

目前，我试图模仿this示例。这样可以正常工作，但它有一个很大的限制：只有当你的输入类型是文本时它才有效。

当您使用其他输入类型时，让我们说电子邮件，基本字符串不是有效的，因此占位符会落在文本上。

所以在我眼里，有解决这个问题的方法：

在任何地方使用type = text，这有点糟糕，因为在手机上你不会得到电子邮件类型的键盘。
使用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

我想实现这个目标：

使用仅限CSS的解决方案来检查输入是否具有任何值。如果它是空的，我可以将占位符显示在其正常位置，当它不是时，我可以在输入上方显示占位符。
输入[type =＆＃34; email＆＃34;]：当输入完全为空时，make make返回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; 
}

即。与您的fieldset标签相同的规则

请参阅此fiddle

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

1 个答案: