Change text fields background colour if negative number using Jquery/CSS

I have the following text input on a budget calculator form which displays the final balance...

<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>

How do I go about setting the background of the input to red using css and jquery if the value is a negative number?

开发者_C百科

I am sure this is very simple but I have scanned the net looking for a solution for ages.

Please can someone help?, my head hurts!

---

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

Set a class redBackground to give your inputs red background and it should work fine.

CSS:

input.redBackground {
    background-color: red;
}

---

You can use the .bind to attach a onkeyup event to it.

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

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