JQUERY / JAVASCRIPT won't work in mobile devices

Question

I got a message system which requires a minimum amount of characters. Therefore I use aa submit button which is disabled by default. When the character limit is passed the submit button needs to be enabled.

The current code I use is:

  $(window).load(function(){
     var amountArray = new Array(85,90,95,120);
     $('#message').keyup(function(){
         var length = $(this).val().length;
         if(length < amountArray[0]){
            $('.verzendenMSG').css('color','red');
         }else if(length < amountArray[1]){
            $('.verzendenMSG').css('color','darkorange');
         }else if(length < amountArray[2]){
            $('.verzendenMSG').css('color','olive');
            $('.verzendenMSG').removeAttr('disabled');
          }else if(length >= amountArray[3]){
            $('.verzendenMSG').css('color','green');
            $('.verzendenMSG').removeAttr('disabled');
         }
     });

With this code you get on desktop browsers (also Safari) a red text in the submit button and when you get closer to the limit the color is more green and when you get to the defined minimum the disable option of the submit button will disappear.

This all won't work in a mobile browser, such as the ipad browser and the windows phone 7 browser.

My question is, what could be the issue and how can I solve the issue. Since this code is actually really simple?

Answer 1

Try replacing $(window) with $(document) like this:

  $(document).ready(function(){
     var amountArray = new Array(85,90,95,120);
     $('#message').keyup(function(){
         var length = $(this).val().length;
         if(length < amountArray[0]){
            $('.verzendenMSG').css('color','red');
         }else if(length < amountArray[1]){
            $('.verzendenMSG').css('color','darkorange');
         }else if(length < amountArray[2]){
            $('.verzendenMSG').css('color','olive');
            $('.verzendenMSG').removeAttr('disabled');
          }else if(length >= amountArray[3]){
            $('.verzendenMSG').css('color','green');
            $('.verzendenMSG').removeAttr('disabled');
         }
     });