使用jQuery檢測表單輸入上的自動完成

Question

我有一個表單，用於檢測所有文本字段在每個keyup（）和focus（）;上是否有效。如果它們都是有效的，它將啓用用戶按下的提交按鈕。但是，如果用戶使用瀏覽器自動填充功能填充其中一個文本輸入，則會阻止啓用提交按鈕。

有沒有辦法來檢測是否有任何輸入已經改變，無論如何改變，使用jQuery？

Answer 1

jQuery更改事件只會觸發模糊。鍵入事件將在您鍵入時觸發。點擊自動完成選項時不會觸發。我也尋找一種方法來檢測這一點，但我目前正在

$(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> 

---

B計劃

另一種選擇是總是有提交按鈕點擊，但使用.submit()將其綁定到窗體驗證。那麼如果表格是有效的，繼續。如果表單無效，請使用.preventDefault()停止提交表單.....並且您還會顯示一條警告消息，指出缺少的字段。

Answer 3

答案已經this問題被給予。它不使用jQuery，但它適用於自動完成：

使用js onpropertychange事件。

Answer 4

我有一個體面的解決方案後，有同樣的問題。將keyup設置爲正常的表單域，然後將鼠標懸停在周圍的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來檢測<input>中基於文本的更改（除ctrl和shift之外的密鑰）。

例如：

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

Answer 7

我想上一個字段，它不會是無效的（把我的情況紅）一個非常好的用戶體驗，只要用戶是相當活躍的如仍然填補了該領域。

要正常輸入，我可以用debounce函數連接到keyup，而blur連接立即驗證。雖然看起來keyup是由lastpass觸發的，但由於我已將其去抖，所以驗證延遲了。感謝@ peter-ajtai，我試圖添加change事件，它確實捕獲了最後一個通行證，並使其他細節單獨存在。

CoffeeScript的例子：

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

這種運作良好，LastPass的形式填充觸發立即驗證。

Answer 8

自己，我用

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

這奏效了Chrome瀏覽器。 input是什麼使它適用於自動完成。

Answer 9

這是最終的溶液中，保證工作

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