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

Question

我最近轉向使用<a>標簽作為提交按鈕進行樣式設置。 我有一個JS編寫的插件來處理表單及其驗證。

要模擬普通表單，用戶點擊要提交的文本字段，我會在keyup上檢測輸入和提交表單。

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

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

Answer 1

您可以觀察向上或向下箭頭，並在按下后設置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
        }
    });
});

但是，如果用戶在沒有自動完成窗口的情況下按下向下箭頭，則需要在提交之前按兩次Enter鍵。

您可能需要考慮編寫自己的自動完成腳本或使用jQuery自動完成插件來獲得對自動完成窗口的更多控制。

Answer 2

您可以覆蓋自動完成行為以將其關閉。

<form autocomplete="off">

</form>

Answer 3

這樣的事情會不起作用？

    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標簽提交按鈕是非常糟糕的做法。 您應該能夠以相同的方式設置常規提交按鈕的樣式，並且它將適用於所有設備。

Answer 4

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