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 事件，它会立即触发。或支持稍旧浏览器的事件组合:input change paste click 您可以立即响应，然后 keydown 您需要在非常短暂的延迟后响应。但我认为目前 input 的支持非常好，除了 IE8 不支持它之外。

只有 input 的例子:

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>

input change paste click 立即处理并在非常短暂的延迟后 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())。