focus() 不适用于锚链接

Question

<a id="news_click" href="#news"> <span style="color:#B2B2B2" class="radius secondary label">Do you want fresh news and feeds?</span></a>

<div class="large-5 columns">
    <div class="row collapse">
        <div class="small-12 columns">
            <form id="email_form" data-validate="parsley" data-trigger="focusin focusout">
                </br>
                <input id="email" type="text" placeholder="Email" class="hg" name="email" data-notblank="true" data-type="email">
            </form>
        </div>
    </div>
</div>

<div class="bottom_blue" id="news"></div>

---

$('#news_click').click(function () {
    $('form#email_form input#email.hg').focus();
});

只有当我删除<div class="bottom_blue" id="news"></div 时，焦点事件才有效。这不是一个选项，因为这是一个锚链接。

有什么想法吗？可能问题是js是在anchor之前执行的。

编辑：显然这适用于 chrome，而不是 FF。

demo

Answer 1

本质上，您需要考虑点击事件并将焦点作为 Firefox 中的竞争条件。使用任一：

$('#news_click').click(function (e) {
    e.preventDefault();
    $('#email').focus();
});

或

$('#news_click').click(function (e) {
    setTimeout(function(){$('#email').focus();},10);
});

jsFiddle example

Answer 2

你忘记了<div class="bottom_blue" id="news"></div末尾的尖括号...

Demo here

改用这个：

<div class="bottom_blue" id="news"></div>

另外，请尝试更改此设置：

$('form#email_form input#email.hg').focus();

到这里：

$('#email').focus();

无论如何，只有一个元素具有相同的id，所以你的具体程度没有区别。

编辑： Firefox 似乎在 email 框被聚焦后访问了 href... 您可以使用 preventDefault() 作为 j08691 的答案，或者采用 href 属性关闭链接（参见updated fiddle）。