為什么在更改文本字段時未立即啟用“提交”按鈕？

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 ，您可以立即對其進行響應，然后input change paste click keydown ，在短暫的延遲后需要進行響應。 但是我認為input法的這些天非常好，除了不支持IE8的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() （或在現代瀏覽器中，使用$('#parlay-amount-textfield').val().trim() ）。

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/"