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

Question

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

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

Answer 1

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

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

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

Answer 2

Вы можете использовать функцию 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> 

---

Plan B

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

Answer 3

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

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

Answer 4

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

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

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

Answer 5

Моим вопрос обнаружение автозаполнения (через плагин, как 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(); 
}); 

See demo in JSFiddle.

Answer 6

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

Например:

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

Answer 7

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

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

CoffeeScript пример:

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

Это хорошо работало и форма LastPass заполнения вызывает немедленную проверку.

Answer 8

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

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

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

Answer 9

это окончательное решение, гарантированно работать

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