如果使用 Jquery/CSS 为负数，则更改文本字段背景颜色答案

【问题标题】：Change text fields background colour if negative number using Jquery/CSS如果使用 Jquery/CSS 为负数，则更改文本字段背景颜色
【发布时间】：2010-03-30 09:12:36
【问题描述】：

我在显示最终余额的预算计算器表单上输入了以下文本...

<tr><td align="right"><b>Balance: &pound;</b></td><td align="left"><input type="text" class="res" name="res" id="res" size="10" readonly="readonly"></td></tr>

如果值为负数，如何使用 css 和 jquery 将输入的背景设置为红色？

我确信这很简单，但我已经扫描了网络寻找多年的解决方案。

有人可以帮忙吗？，我的头好痛！

【问题讨论】：

标签： jquery css validation

【解决方案1】：

$('input').blur(function () {
    $(this).toggleClass('redBackground', $(this).val() < 0);
});

设置一个类 redBackground 为您的输入提供红色背景，它应该可以正常工作。

CSS：

input.redBackground {
    background-color: red;
}

【讨论】：

但是使用更好的类名。旨在描述内容而不是呈现。我会使用“negativeValue”而不是“redBackground”。如果您将样式更改为白底红字，或者使用斜体，或者将来的其他内容，它只会咬您。
谢谢，这行得通。但是，只有在您点击“计算”并将光标单击到文本字段后。怎么做才能改变正在更新的输入的颜色？

【解决方案2】：

您可以使用 .bind 将 onkeyup 事件附加到它。

$(document).ready(function(){
$('.res').bind('keyup', function() { 

if($('.res').val() < 0){
 $('.res').css({'background-color':'#FF0000'});
}});
});

【讨论】：

如果您使用匿名事件处理程序，则不要使用$(selector).bind(eventname)，而是使用$(selector).eventname。是一样的，但是你的代码可读性会提高。