jQuery电子邮件可用性无法检查用户何时使用自动填充

Question

我有一个完美的jQuery函数，用于检查电子邮件是否可用，但是，如果浏览器向他们提供自动填充建议，则无法识别是否已输入其他字母。例如 - 用户开始输入admin@admin.com，但是，在“adm”，他们使用下拉列表中的自动填充。 jQuery仍然认为只输入了adm。

$(function () {
$('#email').keyup(function () {
    var email = $(this).val();
    if (email != '' && email.length > 6) {
        //$('.check').show();
        $('error').fadeIn(400).html
        var dataString = 'email=' + email;
        $.ajax({
            type: "POST",
            url: "pages/check_email.php",
            data: dataString,
            cache: false,
            success: function (result) {
                if (result == 'Available') {
                    $('.check').html('Available');
                } else {
                    $('.check').html('Unavailable');
                }
            }
        });
    } else {
        $('.check').html('');
        }
    });
});

Answer 1

我想建议你做的两件事：

1-不要将你的支票与Keyup挂钩，这将在我每次输入/删除单个字符时检查，这可能只是检查太多，而是使用模糊。

2-我认为您可以尝试为此表单或其中的特定元素禁用自动完成功能，您可以了解如何解决此问题。

示例：

<form id="myForm" autocomplete="off" method="post">

来自w3schools：

  

自动填充属性指定表单是否应具有   自动完成开启或关闭。

     

启用自动填充功能后，浏览器会自动填写值   基于用户之前输入的值。

     

提示：表单上可以自动填写“on”，“off”   对于特定的输入字段，反之亦然。

Answer 2

以下是我在使用Regex（第一个）之前进行AJAX调用之前的测试时所说的，这样当他们有焦点时，即使他们确实使用了自动完成，毫秒，它将触发你的AJAX并查看是否收到了电子邮件。

jsFiddle DEMO

var testInterval;

$('#email').on({
    focus: function () {
        var _this = $(this);

        testInterval = setInterval(function () {
            var val = _this.val();

            if (/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(val)) {

                clearInterval(testInterval);
                // valid email
                // now do AJAX!
            }
        }, 100); 
    },

    blur: function () {
        clearInterval(testInterval);
    }
});