JavaScript：如果字段不是自动填充，则启用按钮

Question

function checkValid() {
  var cbChecked = $(".fakeRadio").is(":checked"); // check if checked
  var hasText = $("#email-download-document").val().length > 0; // check if it has text

  $("#document-choice-button").prop("disabled", !cbChecked || !hasText);
}

$(function() {
  checkValid(); // run it for the first time
  $(".fakeRadio").on("change", checkValid); // bind checkbox
  $("#email-download-document").on("change", checkValid) // bind textbox
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="row">
  <div class=" col-md-5">
    <label for="primary">Email address</label>
    <input type="email" class="form-control" id="email-download-document" name="EmailDownloadDocument" placeholder="Enter email address to get document(s)">
  </div>
</div>
<br>
<div class="row">
  <div class=" col-md-5">
    <input id="document-choice-button" type="submit" class="btn btn-default" name="DocumentSelected" value="{% trans 'Send to my email' %}" />
  </div>
</div>

我想得到您的帮助，因为我简单的Javascript部分和Chrome浏览器存在一些问题。

在Chrome浏览器中，我的按钮显示为灰色，直到我在填写该字段时单击该字段之外。由于type='email'，我希望在该字段自动填写电子邮件验证时启用我的按钮。

这是一个示例：

Answer 1

尝试input事件，而不是 change 。

  

当customCell.setup() //you can add some parameters if its needed，<input>或{的值时， 同步 会触发DOM input 事件。 {1}}元素已更改。

<select>

<textarea>

Answer 2

当用户在字段中键入内容时，尝试在Javascript中使用“输入”事件而不是“更改”事件来触发该函数。

Answer 3

默认具有disabled

<input id="document-choice-button" type="submit" ... disabled="disabled" />

这样，它将在没有任何JavaScript的情况下被禁用。

然后，将一个函数附加到文本框的keyup事件中，以检查当前文本的长度是否大于零。

$("#email-download-document").keyup(function(){    // triggered at any keystroke
  if ($(this).val().length>0) {
    $("#document-choice-button").removeProp("disabled");      // enable the field
  } else {
     $("#document-choice-button").prop("disabled","disabled");  // disable the field
  }
});

PS：这将使您在输入或清除文本字段中的文本时启用/禁用按钮。如果您只想在退出文本字段后禁用/重新启用，则需要将该功能附加到change事件

$("#email-download-document").change(function(){   //triggered after leaving textbox
  if ($(this).val().length>0) {
    $("#document-choice-button").removeProp("disabled");
  } else {
     $("#document-choice-button").prop("disabled","disabled");
  }
});

$("#email-download-document").keyup(function(){
  if ($(this).val().length>0) {
    $("#document-choice-button").removeProp("disabled");
  } else {
     $("#document-choice-button").prop("disabled","disabled");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="row">
  <div class=" col-md-5">
    <label for="primary">Email address</label>
    <input type="email" class="form-control" id="email-download-document" name="EmailDownloadDocument" placeholder="Enter email address to get document(s)">
  </div>
</div>
<br>
<div class="row">
  <div class=" col-md-5">
    <input id="document-choice-button" type="submit" class="btn btn-default" name="DocumentSelected" value="{% trans 'Send to my email' %}" disabled="disabled" />
  </div>
</div>