Question

我写了一些JavaScript / jQuery代码，将用户的电子邮件添加到我的简报数据库中。有一个“订阅”按钮来启动该过程，但我也希望用户能够获得返回以获得可用性。

奇怪的是，代码既适用于按钮，也适用于返回键，因为电子邮件已添加到数据库中，但仅显示警报的回调函数仅在按下按钮时触发，按下返回键时不。

$('#newsletter_button').click(function(event) {
    newsletterSignup();
});
$('#newsletter_email').bind('keyup', function(event) { newsReturn(event); });

function newsletterSignup() {
    var email = $.trim($('#newsletter_email').val());
    if(!validateEmail(email)) {
    alert('Please enter a valid email');
    return false;
    } else {
        // add email to database
        $.post('newsletterSignup.php', 
               { email: email }, 
               function(data) {alert(data);}
        );
        $('#newsletter_email').val("");
    }
}

function newsReturn(evt) {
    if (evt.keyCode == 13) {
    newsletterSignup();
    }
}

无论如何调用该函数，该函数必须工作相同！就像我说post函数显然被同时调用，因为电子邮件正被添加到数据库中。

我唯一能想到的是它与事件有关。不知道是什么。

Answer 1

按下Enter键时发生的浏览器行为是古怪的。是否认为提交按钮被“点击”按Enter键在浏览器之间有所不同，还取决于（a）表单中按钮的数量，以及（b）表单中文本输入的数量。通常，当有一个文本字段和一个按钮时，该按钮将不会被视为“成功”，您将不会获得单击事件，并且按钮的名称/值对将不会包含在提交的表单值中。< / p>

此外，在输入字段中捕获Enter按键是不可靠的，不应该这样做。这将在各种情况下触发，当Enter按下不应提交表格时（例如，当IME正在使用时），不会在应提交表格的地方开火（例如表格中的其他元素有焦点），并再次有浏览器差异。

因此，请避免所有这些痛苦：始终绑定到包含元素的submit上的<form>事件，而不是试图猜测哪些UI事件应该触发该提交。

Answer 2

我能想到的第一件事是evt.keyCode - 尝试使用evt.which（统一不同浏览器行为的jQuery属性）。

编辑：现在我注意到了第二个警报。你的代码有点混乱，让我们清理一下，看看问题是否仍然存在：

$('#newsletter_button').click(newsletterSignup);
$('#newsletter_email').keyup(newsReturn);

function newsletterSignup(e) {
    e.preventDefault();
    var email = $.trim($('#newsletter_email').val());
    if (!validateEmail(email)) {
        alert('Please enter a valid email');
    } else {
        // add email to database
        $.post('newsletterSignup.php', 
             { email: email }, 
             function (data) { alert(data); }
        );
        $('#newsletter_email').val('');
    }
    return false;
}

function newsReturn(e) {
    if (e.which === 13) {
        newsletterSignup.apply(this, arguments);
    }
}

此外，我不知道您的标记是什么样的，但如果您要使用表单：

<form action="newsletterSignup.php" method="post" id="newsletter-form">
    <input type="text" id="newsletter-email" name="newsletter_email"/>
    <button type="submit">Go-go-gadget!</button>
</form>

然后你可以跳过键盘内容：

$('#newsletter-form').submit(newsletterSignup);

function newsletterSignup(e) {
    e.preventDefault();
    var email = $.trim($('#newsletter-email').val());
    if (!validateEmail(email)) {
        alert('Please enter a valid email');
        return false;
    } else {
        // add email to database
        $.post(this.action, 
             { email: email }, 
             function (data) { alert(data); }
        );
        $('#newsletter-email').val('');
    }
    return false;
}

另外，即使您在页面上遇到JavaScript问题，人们也可以注册。

函数行为的差异 - JavaScript / jQuery

2 个答案: