Измените цвет фона текстовых полей, если отрицательное число, используя Jquery / CSS

Question

У меня есть следующий текстовый ввод в форме калькулятора бюджета, который отображает окончательный баланс ...

<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, если значение является отрицательным числом?

Я уверен, что это очень просто, но я сканировал сеть в поисках решения целую вечность.

Пожалуйста, кто-нибудь может помочь? Моя голова болит!

Answer 1

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

Установите класс redBackground, чтобы дать вашим входам красный фон, и он должен работать нормально.

CSS:

input.redBackground {
    background-color: red;
}

Answer 2

Вы можете использовать .bind, чтобы прикрепить к нему событие onkeyup.

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

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