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在锚之前执行。

编辑：显然这适用于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，所以它的具体程度没有区别。

编辑：在href框重点关注后，Firefox似乎访问了email ...您可以使用preventDefault()，如j08691＆＃39;回答，或从链接中取出href属性（请参阅updated fiddle）。

focus（）不适用于锚链接

2 个答案: