Question

我最近开始使用<a>标记作为提交按钮进行样式设置。我有一个JS编写的插件，用于处理表单及其验证。

要模拟普通表单，用户点击要提交的文本字段，我会检测输入并在密钥表上提交表单。

问题是如果用户点击从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
        }
    });
});

但是，如果用户在没有自动完成窗口的情况下按下向下箭头，则需要在提交前按两次输入。

您可能需要考虑编写自己的自动填充脚本或使用jQuery autocomplete plugin来获取对自动完成窗口的更多控制权。

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或某些浏览器无法启动。

如何检测用户是否在文本字段上使用自动填充？

4 个答案: