JQuery檢查輸入是否為空而不檢查onload？

Question

我正在使用此代碼來檢查輸入框是否為空並且它工作正常，但它只檢查檢查按鍵是否在頁面加載時不按。

它應該做它應該做的但我也希望它檢查頁面加載時的狀態。

這是當前的代碼：

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

Answer 1

請嘗試以下方法：

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

Answer 2

嘗試檢查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');
});

Answer 3

最簡單的方法是在頁面加載時觸發任何keyup，keydown等事件。 然后它會自動調用您的特定處理程序

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

Answer 4

那么為什么不加載頁面后才檢查字段？

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

Answer 5

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