如果为空(<input>最好没有JS)，如何使CSS警告

Question

我在表单中有一个<input>文本字段。如果我点击文本输入字段，当它失去焦点时将其留空，则background-color将更改为<input>。

我只想使用CSS，而不是JS或jQuery。请帮帮我。

如果仅仅使用CSS是不可能的，那么我如何使用JS或jQuery来实现它呢？

Answer 1

是的，您只能使用CSS，而不能使用JS或jQuery来实现结果，例如：

HTML:

<input placeholder="name" type="text" />
<input placeholder=" " type="text" />

CSS:

::-webkit-input-placeholder {
    color: #fff;
    background: red;
}
:-moz-placeholder { /* Firefox 18- */
    color: #fff;
    background: red;
}
::-moz-placeholder {  /* Firefox 19+ */
    color: #fff;
    background: red;
}
:-ms-input-placeholder {  
    color: #fff;
    background: red; 
}

前提条件是您需要一个占位符属性，而且它不是没有。看看这个JSFiddle的例子。

你可以阅读这篇文章样式占位符文本关于这个css属性了解更多。

Answer 2

您可以使用JS/jQuery来实现这一点，比如：

HTML

<input id="name" placeholder="name" type="text" />

jQuery

$('#name').on('blur', function(){
        if(!$(this).val().trim()){
            $(this).css({
                'background-color': 'red'
            })
        }else{
            $(this).css({
                'background-color': 'white'
            })
        }
    })

请查看以下链接：JSFIDDLE

Answer 3

最接近的纯CSS方法需要浏览器支持:required伪类。您的输入将具有required属性，如下所示：

<input id="test1" name="test1" type="text" required />

你的CSS看起来像：

input:required {
    background-color: red;
}

下面是一个例子jsfiddle:

http://jsfiddle.net/5L5hx4bo/

然而，这将在页面加载时设置输入的样式，而不是在字段失去焦点时，但从CSS/document的角度来看，这更有意义。对于一个根据状态改变样式的字段，它将是三个"状态"之一：

无效：

可以使用进行与上述类似的处理

input:invalid {
    background-color: red;
}

但是，空白文本输入不会被认为是"无效的"，因此永远不会被这样的规则所样式化。然而，具有类似"电子邮件"的类型且其值设置为"伪造#值"的输入将被设置样式，因为该值对该类型无效。

必需：

如果设置了required属性，则空白文本输入将被视为匹配，但当表单最初加载时，这也将是匹配的。

焦点（否定规则）：

当输入没有处于焦点状态时，可以有一个CSS规则，但这与"模糊"不同。与required类似，该规则将在元素加载时应用，而不是仅在焦点丢失时应用。

由于您对样式的要求是：

• 当输入的状态从聚焦变为不聚焦时
• 当输入为类型text且值为空时
• 当一个输入是最近的元素，焦点状态变为不焦点时（因此，一旦另一个输入失去焦点并应用了样式规则，就会从输入中删除样式规则）

这不会被认为是"纯CSS"类型的状态，因此应该通过javascript进行处理。

Answer 4

这不可能只通过CSS实现。JS/jQuery通常需要进行DOM操作和脚本编写。

例如，如果你有这个：

<input type="text" id="input" />

您可以使用jQuery检查更改和更改背景颜色onblur。

var initalValue;
$("#input").focusin(function() {
    initialValue = $(this).val();
});
$("#input").focusout(function() {
    if($(this).val() != initialValue) {
        $(this).css("background-color", "red");
    } else {
        $(this).css("background-color", "white");
    }
});

这将获得其初始值，并将其与失去焦点后的值进行比较。如果不同，输入的背景颜色将变为红色。

请参阅此JSFiddle。

编辑在再次阅读您的问题时，我注意到我读错了。如果有任何更改，我的答案会将背景设为红色，但如果<input>为空，则您希望背景为红色。你可以用

$("#input").focusout(function() {
    $(this).css("background-color", ($(this).val() == "") ? "red" : "white");
});

请参阅更新后的JSFiddle。