Question

使用此代码只有在以下情况下才会启用该按钮：

我在textfield中输入内容
我将焦点更改为文本字段。

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

＆＃13;

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

＆＃13;

Answer 1

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

您可以在现代浏览器上使用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);
}

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

Answer 2

Since we are using the change event the input fields focus tends to say that user has not yet ended up his field with data.so only after the focus is moved the button gets enabled u can use the above Link for further clarifications
[1]"https://jsfiddle.net/MuthuramanNagarajan/gs2sff6j/"

更改为textfield时，为什么不立即启用提交按钮？

2 个答案: