javascript - 为什么在更改文本字段时未立即启用提交按钮？

Question

使用此代码，按钮将仅在以下时间后启用:

1. 我在文本字段中输入内容

2. 我将焦点从文本字段中移出。

如何让按钮在输入内容后立即启用？

  function validateAmount(){
    if ($('#parlay-amount-textfield').val().length > 0) {
        $("#parlay-submit-button").prop("disabled", false);
    }
    else {
        $("#parlay-submit-button").prop("disabled", true);
    }
  }

  $(document).ready(function(){
    validateAmount();
    $('#parlay-amount-textfield').change(validateAmount);
  });

Answer 1

在焦点离开input 字段之前，change 事件不会触发。

您可以在现代浏览器上使用 input 事件，该事件会立即触发。或者支持稍旧的浏览器的事件组合:输入更改粘贴单击，您可以立即响应，然后keydown，您需要在非常短暂的延迟后响应。但我认为现在 input 的支持非常好，但 IE8 不支持它是一个明显的异常(exception)。

仅输入的示例:

function validateAmount() {
  if ($('#parlay-amount-textfield').val().length > 0) {
    $("#parlay-submit-button").prop("disabled", false);
  } else {
    $("#parlay-submit-button").prop("disabled", true);
  }
}

$(document).ready(function() {
  validateAmount();
  $('#parlay-amount-textfield').on("input", validateAmount);
});

<input type="text" id="parlay-amount-textfield">
<input type="button" id="parlay-submit-button" value="Send">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

立即处理输入更改粘贴点击并在非常短暂的延迟后处理keydown的示例:

function validateAmount() {
  if ($('#parlay-amount-textfield').val().length > 0) {
    $("#parlay-submit-button").prop("disabled", false);
  } else {
    $("#parlay-submit-button").prop("disabled", true);
  }
}

$(document).ready(function() {
  validateAmount();
  $('#parlay-amount-textfield')
    .on("input change paste click", validateAmount)
    .on("keydown", function() {
      setTimeout(validateAmount, 0);
    });
});

<input type="text" id="parlay-amount-textfield">
<input type="button" id="parlay-submit-button" value="Send">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

旁注:FWIW，validateAmount 可以短一点:

function validateAmount() {
  $("#parlay-submit-button").prop("disabled", $('#parlay-amount-textfield').val().length == 0);
}

如果空格不是有效值，您可以考虑在 $('#parlay-amount-textfield').val() 周围抛出 $.trim() (或在现代浏览器上，使用 $('#parlay-amount-textfield').val().trim())。