Question

这可能非常简单，但经过数小时的搜索，我无法弄明白。

我需要在叠加层内的表单字段上自动对焦，该按钮单击按钮即可打开。

我正在使用简单的jQuery覆盖代码。

$(function() {
    $("a[rel]").overlay();
});

按钮的代码是：

<a rel="#popup">Button text</a>

并且（简化）叠加层的HTML代码在这里：

<div class="simple-overlay" id="popup">
    <form method="post" class="form-class" action="form-action"  >
        <input class="text" id="email-field" type="text" name="email" value="" />
        <input name="submit" class="submit" type="submit" value="Submit" tabindex="501" />
    </form>
</div>

提前致谢。

Answer 1

这个答案是从下面的好评（@Spokey）中更新的。

准备好

启动叠加插件

$(function () {
    $("a[rel]").overlay({ mask: '#000000', onLoad: function(){ $('#email-field').focus();} });
});

并在没有onclick事件的情况下保持<a>标记清晰。

这应该是这样做的方式。

Answer 2

尝试将autofocus属性添加到输入字段：

<input class="text" id="email-field" type="text" name="email" value="" autofocus />

Answer 3

感谢@Spokey，他找到了解决方案。

如果有人在寻找答案，我已将其发布在下面。

您还可以在此处查看实时示例：http://www.petersandeen.com/get-landing-page-checklist/

$(function () {
    $(".register-button").overlay({
        mask: '#000000',
        onLoad: function () {
            $('#email-field').focus();
        }
    });
});

.register-button是分配给打开叠加层的按钮的div类。

＃email-field是分配给叠加层内的表单字段的div id，它会在打开叠加层时自动聚焦。

叠加中的自动对焦表单字段

3 个答案: