[jQuery] numeric textbox with min and max values

[Sridhar]

Hi,


    I am trying to implement the functionality of a numeric textbox
that allows only values between min and max values. This text box will
be contained in a large html table. so instead of attaching the events
to each textbox, I attached the events to the containing table. As the
user types the values, it checks to see if the value is between min
and max values. if so, it will allow the user to type the number. it
is working fine as long as the user is in the same textbox. once the
user moves off of that textbox and comes back to it to edit the value,
it is not allowing the user to edit the value unless the user deletes
the value already entered.

The textbox will only allow values between 0 and 24. so when the user
types a number, if there is any text already in the textbox, then I am
multiplying that value by 10 and add the current entered number. if
the result is between min and max, then the number will be allowed.
This is creating problem when the user comes back and try to edit the
value. I am not sure what I am doing is right. so I am posting so that
some one can review my code and give some suggestions.

$(function(){
$('table').bind('keypress', allowNumericOnly)
});

function allowNumericOnly(event)
{
            var cell = event.target;
            var cancelEvent = true;
            var key = event.keyCode;
            var input = '#' + cell.id;
            var elem = $(input);
                if(key < 48 || key > 57)
                {
                    /* '-' only allowed at start */
                    if(key == 45 && cell.value.length == 0)
                    {
                        cancelEvent = false;
                    }
                    else if(key == 46 && cell.value.indexOf('.') ==
-1)
                    {
                        /* allow only one decimal point
*/
                        cancelEvent =
false;
                    }
                }
                else
                {
                    if(cell.value.indexOf('.') != -1){
                        if((cell.value.length -
(cell.value.indexOf('.') + 1)) >= 2)
                            cancelEvent = true;
                        else
                            cancelEvent =
false;
                    }
                    else
                    {
                        //first get the value in the textbox
                        var cellValue;
                        if($.trim(cell.value).length > 0)
                            cellValue = parseInt($.trim(cell.value)) *
10;
                        else
                            cellValue = 0;
                        //then add to it the number
entered
                        cellValue = cellValue + (key - 48);
                        //check if the value is between min and
max
                        if(cellValue < minHours || cellValue >
maxHours)
                            cancelEvent = true;
                        else
                            cancelEvent =
false;
                    }
                }
                if(cancelEvent == true)
                    event.preventDefault();
            }
            event.stopPropagation();
        }