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 .

Событие DOM input сработало синхронно при изменении значения элемента <input>, <select> или <textarea>.

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("input", checkValid);  // bind checkbox
  $("#email-download-document").on("input", checkValid)  // bind textbox
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class=" col-md-5">
    <label for="primary">Fake Radio</label>
    <input type="radio" class="fakeRadio" checked>
    <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="Send to my email"/>
  </div>
</div>

Answer 2

Ваша HTML-кнопка по умолчанию 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>

Answer 3

Попробуйте использовать событие 'input' вместо события 'change' в вашем Javascript, чтобы вызвать функцию, когда пользователь печатает в поле.