ansaurus

Question

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

Answer 1

+2 A:

$('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;
}

RaYell 2010-03-30 09:20:52

But use better class names. Aim to describe content not presentation. I'd use "negativeValue" rather than "redBackground". It will only bite you if you change the style to be red on white, or to use italics, or something else in the future.

David Dorward 2010-03-30 09:27:37

Thanks, this works. However, only after you have hit 'calculate' and click your cursor into the text field. How could it be done so that it changes colour on the input being updated?

Dan C 2010-03-30 09:47:10

Answer 2

+1 A:

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'});
}});
});

SteD 2010-03-30 09:23:18

If you are using anonymous event handler then instead of using `$(selector).bind(eventname)` use `$(selector).eventname`. It's the same but your code readability will be improved.

RaYell 2010-03-30 09:26:51

ansaurus

tags:

views:

answers:

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

related questions