JQuery检查输入是否为空而不检查onload?

时间:2012-01-13 10:14:53

标签: javascript jquery

我正在使用此代码来检查输入框是否为空,并且它工作正常,但它只检查在页面加载时检查是否按键。

它可以做它应该做的但是我还希望它在页面加载时检查状态。

以下是当前代码:

$('#myID').on('keyup keydown keypress change paste', function() {
  if ($(this).val() == '') {
    $('#status').removeClass('required_ok').addClass('ok');
  } else {
    $('#status').addClass('required_ok').removeClass('not_ok');
  }
});

5 个答案:

答案 0 :(得分:6)

尝试以下方法:

$(function() {
  var element = $('#myID');
  var toggleClasses = function() {
    if (element.val() == '') {
      $('#status').removeClass('required_ok').addClass('ok');
    } else {
      $('#status').addClass('required_ok').removeClass('not_ok');
    }
  };
  element.on('keyup keydown keypress change paste', function() {
    toggleClasses(); // Still toggles the classes on any of the above events
  });
  toggleClasses(); // and also on document ready
});

答案 1 :(得分:3)

尝试检查doc ready上的值:

$(function() {  
    if ($('#myID').val() == '') {
        $('#status').removeClass('required_ok').addClass('ok');
    } else {
        $('#status').addClass('required_ok').removeClass('not_ok');
    }
});

编辑:就像这个答案的更新一样,一个更好的方法可能是使用切换类,在doc ready中设置然后触发事件在页面加载时运行。

function check() {
    var $status = $('#status');

    if ($(this).val()) {
        $status.toggleClass('required_ok').toggleClass('ok');
    } else {
        $status.toggleClass('required_ok').toggleClass('not_ok');
    }
}


$(function () {
    $('#myID').on('keyup keydown keypress change paste', check);
    $('#myID').trigger('change');
});

答案 2 :(得分:3)

最简单的方法是在页面加载时触发任何keyup,keydown等事件。然后它会自动调用您的特定处理程序

$(document).ready(function(){
  $("#myID").trigger('keyup');
});

答案 3 :(得分:2)

那么为什么不加载页面后才检查字段?

$(document).ready(function(){
  if ($('#myID').val() == '') {
    $('#status').removeClass('required_ok').addClass('ok');
  } else {
    $('#status').addClass('required_ok').removeClass('not_ok');
  }
});

答案 4 :(得分:2)

$(document).ready(function(){
var checkVal = $("myID").val();
if(checkVal==''){
$('#status').removeClass('required_ok').addClass('ok');
}
else{
$('#status').addClass('required_ok').removeClass('not_ok');
}
});