如何檢測用戶是否在文本字段上使用自動填充功能？

Question

我最近搬到使用<a>標籤作爲提交按鈕樣式的目的。 我有一個JS插件，用於處理表單及其驗證。

要模擬一個正常形式，在用戶點擊輸入要輸入的文本字段時，我會檢測輸入並在關鍵幀上提交表單。

問題是，如果用戶點擊輸入Firefox的自動完成下拉列表，例如，它檢測到並仍然嘗試提交表單。

任何想法？我可能會切換到我的表單處理程序追加一個隱藏的提交按鈕，如果沒有找到一個窗體...

Answer 1

我只是讓我的驗證插件自動尋找一個提交按鈕，如果不存在，它會添加它，並將其樣式設置爲-9999px頂部和左側，絕對。這樣，如果用戶點擊提交，則採取本機操作。我不能只使用display：none按鈕或某些瀏覽器不會觸發。

Answer 2

您可以覆蓋自動填充行爲將其關閉。

<form autocomplete="off"> 

</form> 

Answer 3

您可以觀察向上或向下箭頭，並且一旦按下，就設置一個inAutoComplete標誌。事情是這樣的：

$(document).ready(function() { 
    var autoCompleteActive = false; 

    $(document).keydown(function(e) { 
     switch (e.keyCode) { 
      case 38: 
      case 40: autoCompleteActive = true; 
      break; 
      default: autoCompleteActive = false; 
      break; 
     } 

     if(e.keyCode==13 && !autoCompleteActive) { 
      //do your onEnter stuff 
     } 
    }); 
}); 

但是，如果用戶按下向下箭頭沒有自動完成窗口彈出，他們將需要按輸入它被提交前的兩倍。

您可能想要考慮編寫自己的自動填充腳本或使用jQuery autocomplete plugin來獲得對自動填充窗口的更多控制。

Answer 4

會這樣的東西不行嗎？

var hasFocus = false; 
    $('#yourAutoCompleteElement').focusin(function() { 
     hasFocus = true; 
    }); 

    $('#yourAutoCompleteElement').focusout(function() { 
     hasFocus = false; 
    }); 

    $('#yourAtagSubmit').keyUp(function (event) { 
     if (event.keyCode == ENTER && !hasFocus) { 
      // submit 
     } 

     return; 
    }); 

編輯：使用A標籤提交按鈕是非常糟糕的做法。您應該能夠以相同的方式設置常規提交按鈕，並且可以在所有設備上使用。