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

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