Обнаружение автозаполнения при вводе формы с помощью jQuery

Question

У меня есть форма, которая определяет, все ли текстовые поля действительны для каждого keyup () и focus (); если все они действительны, пользователь получит возможность нажать кнопку «Отправить». Однако, если пользователь заполняет один из текстовых вводов функцией автозаполнения браузера, он запрещает включение кнопки отправки.

Есть ли способ определить, изменился ли какой-либо вход независимо от того, как он был изменен, с помощью jQuery?

Answer 1

Вы можете попробовать использовать on input для обнаружения текстовых изменений (кроме клавиш типа ctrl и shift) в <input>.

Например:

$(input).on('input', function() { 
    console.log($(this).val()); 
});

Answer 2

Событие изменения jQuery будет срабатывать только при размытии. Событие keyup будет срабатывать при вводе. Ни один из них не срабатывает при нажатии опции автозаполнения. Я также ищу способ обнаружить это, но сейчас я использую

$(selector).bind("change keyup",function(){
    //Do something, probably with $(this).val()
});

Но это не совсем решает проблему ...

Answer 3

Я сам использовал

$(selector).on("change keyup blur input", function() {});

, который добился цели в Chrome.input это то, что заставило его работать для автозаполнения.

Answer 4

Моя проблема заключалась в обнаружении автозаполнения (через плагин, например lastpass или 1password), а также в проблеме, описанной выше

Решение, которое сработало для меня, было:

$(function(){    
    function validate(){
        if($('#email').val() !== '' && $('#password').val() !== '')
            $('#submit').prop('disabled', false);
        else
            $('#submit').prop('disabled', true);
    }

    // Validate after user input
    $('#email, #password').on('keyup change', validate);

    // Validate on mouse enter of body and login form
    // to catch auto-fills from roboform/1password etc...
    $('body, #loginform').on('mouseenter', validate);

    // Validate onload incase of autocomplete/autofill
    validate();
});

См. Демонстрацию в JSFiddle .

Answer 5

У меня есть достойное решение после той же проблемы. Установите keyup как обычно для наших полей формы, затем наведите курсор мыши на окружающий div. Поэтому, как только вы нажмете опцию автозаполнения, ваша мышь окажется над вершиной div:

$("#emailaddress").bind("keyup", function() {
    displayFullSubcribeForm();
});

$(".center_left_box").bind("mouseover", function() {
    displayFullSubcribeForm();
});

Answer 6

это идеальное решение, гарантированно работающее

$(document).bind('mouseover', function(){
        liveValidate();
    });

Answer 7

Я хотел получить очень хороший пользовательский опыт в поле, где он не был бы недействительным (в моем случае красным), если пользователь был достаточно активным, например. все еще заполняя поле.

Чтобы сделать это для обычного ввода, я смог подключить к keyup с помощью функции debounce, в то время как blur подключен для немедленной проверки. Хотя кажется, что keyup запускается последним проходом, так как я его отменил, в проверке произошла задержка. Благодаря @ peter-ajtai я попытался добавить событие change, и оно действительно перехватывает последний проход и оставляет другие тонкости в покое.

Пример Coffeescript:

@fieldExp .keyup($.debounce(@_onExpChange, 3000)) .blur(@_onExpChange) .change(@_onExpChange)

Это сработало, и заполнение формы последнего прохода вызывает немедленную проверку.

Answer 8

Ответ был дан в этом вопросе. Он не использует jQuery, но работает для автозаполнения:

Использовать событие js onpropertychange.

Answer 9

Вы можете использовать функцию jQuery .change().

После начальной загрузки страницы вы можете проверить всю форму, просто чтобы убедиться, что она на самом деле не заполнена.После этого вы можете использовать .change(), чтобы проверить, изменились ли вещи в форме, и, если что-то изменилось, проверить форму еще раз.

$(document).ready(function() {
   // validate form once, just to be sure (if valid, activate submit button)
});
...
<form>
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<script type="text/javascript">     
    $('.target').change(function() {
        alert('Something changed');
        // Try validating form again (if valid, activate submit button)
    });
</script>

---

План B

Другой вариант - всегда нажимать кнопку отправки, но используйте .submit(), чтобы связать ее с валидатором формы.Тогда, если форма действительна, продолжайте.Если форма НЕДОПУСТИМА, используйте .preventDefault(), чтобы остановить отправку формы ..... и вы также отобразите предупреждающее сообщение с указанием пропущенных полей.