Operaで期待通りにぼかし/フォーカスが動作しません

Question

次のjqueryコードを使用して、テキストボックスの境界線をオレンジ色に、ぼかしで灰色にしています。 また、特定のテキストボックスの入力が間違っている場合、検証を実行中に境界線が赤くなり、ラベルである「X」が表示されます。

$(function() { 

    $('.textbox').focus(function() { 
     $(this).css('border', '1px solid orange'); 

    }); 
    $('.textbox').blur(function() { 
     $(this).css('border', '1px solid gray'); 
    }); 

    // $('.num').mouseover(function() { 
    // $('.num').easyTooltip(); 
    // }); 

    $("label").easyTooltip(); 
    // $("a").easyTooltip(); 


    $('.checkdate1').blur(function() { 
     var checkdate = $(this).val(); 
     var error = this.id; 
     error = "#lbl" + error.substring(3); 
     if (checkdate != "") { 
      if (isDate(checkdate)) { 
       $(error).css('display', 'none'); 
       $(this).css('border', '1px solid gray'); 
      } 

      else { 
       $(this).focus(); 
       $(this).css('border', '1px solid red'); 
       $(error).css('display', 'inline'); 

       } 

     } 
     else { 
      $(error).css('display', 'none'); 
      $(this).css('border', '1px solid gray'); 
     } 
    }); 
}); 

問題は、それがグレーと赤のonerrorとonblur、クロム、モジラすなわちONFOCUSオレンジ色で正常に動作しています。 入力が間違っていて、ユーザーが別のテキストボックスをクリックしようとすると赤枠で囲まれていると、フォーカスをtextboxに設定しました。 オペラでは、入力が間違っているとテキストボックスが赤くなり、フォーカスがありますが、ユーザーが他のテキストボックスをクリックすると、その色はオレンジ色になります。間違った入力。 どこに問題があるのか​​教えてもらえますか 助けていただければ幸いです。 ありがとう

Answer 1

jQueryバージョン1.7.1で試してみてください。コードの一部を変更し、日付を検証する関数を追加しました。

$(function() { 

    $('.textbox').on({ 
     focus : function() { 
      $(this).css({border : '10px solid orange'}); 
     }, 

     blur : function() { 
      $(this).css({border : '10px solid gray'}); 
     } 
    }); 

    // $('.num').mouseover(function() { 
    // $('.num').easyTooltip(); 
    // }); 

    //$("label").easyTooltip(); 
    // $("a").easyTooltip(); 


    $('.checkdate1').on('blur', function() { 
     var self = $(this), 
      checkdate = self.val(), 
      new_d = new Date(checkdate), 
      error = "#lbl" + $(this).attr("id").substring(3); 

     if (checkdate !== "") { 

      if (dt_check(checkdate)) { 
       $(error).css('display', 'none'); 
       self.css('border', '1px solid gray'); 
      } 

      else { 
       self.focus().css('border', '1px solid red'); 
       $(error).css('display', 'inline'); 
      } 

     } else { 
      $(error).css('display', 'none'); 
      self.css('border', '1px solid gray'); 
     } 
    }); 
}); 

function dt_check(input) { 

    //Date format should be (DD/MM/YYYY) 

    var valid_regx = /^\d{2}\/\d{2}\/\d{4}$/, 
     returnval = false 

    if (! valid_regx.test(input)) { 
     returnval = false; 
    } else{ 

     var spl_date = input.split("/"), 
      d_day = spl_date[0], 
      d_month = spl_date[1], 
      d_year = spl_date[2], 
      d_obj = new Date(d_year, d_month-1, d_day); 

      if ((d_obj.getDate()!=d_day)||(d_obj.getMonth()+1!=d_month)||(d_obj.getFullYear()!=d_year)) { 
       returnval = false; 
      } 
      else { returnval = true; } 
     } 
    return returnval 
} 

あなたは、このような誤った値を入力することを避けるために、他のフィールド/ btnsを無効にすることができます

$('.checkdate1').on('blur', function() { 
     var self = $(this), 
      checkdate = self.val(), 
      new_d = new Date(checkdate), 
      other_input = $('.textbox'), 
      error = "#lbl" + $(this).attr("id").substring(3); 

     if (checkdate !== "") { 

      if (dt_check(checkdate)) { 
       $(error).css('display', 'none'); 
       self.css('border', '1px solid gray'); 
       other_input.attr('disabled', false); 
      } 

      else { 
       self.focus().css('border', '1px solid red'); 
       $(error).css('display', 'inline'); 
       other_input.attr('disabled', true); 
      } 

     } else { 
      $(error).css('display', 'none'); 
      self.css('border', '1px solid gray'); 
      other_input.attr('disabled', false); 
     } 
    });