使用 jquery 将焦点（或滚动到视图中）到面板

Question

我正在设置一个表单，用户将能够在单击按钮时看到他们选择的单选按钮（具有特定值）。

我能够获得单选按钮焦点并使页面滚动到它，但希望父 panel-body 像 scrollintoview() 一样聚焦在页面上，但这不起作用。

在 .focus() 之前也使用了 .parents(".panel-body") 也不起作用.. ``

<div class="panel-body">
    <div class="input-opt">
        <p>Select options..</p>
        <div rel="tool-tip">
            <div class="radio">
                <label class="lead">
                    <input id="rad1" tabindex="1" required="required" value="one" type="radio">
                    one
                </label>
            </div>
            <div class="radio">
                <label class="lead">
                    <input id="rad2" tabindex="1" required="required" value="two" type="radio">
                    two
                </label>
            </div>

            <div class="radio">
                <label class="lead">
                    <input id="rad3" tabindex="1" required="required" value="three" type="radio">
                    three
                </label>
            </div>
        </div>
    </div>
</div>


button.addEventListener("click", function () {
    var ncyc = $("input[value='two']:checked").length;
    $("input[value*='two']:checked:eq(" + target + ")").focus().keyup();

    target = target + 1;
    if (target == ncyc) {
        target = 0;
    }
});

上面的代码只允许单选按钮进入焦点...当不使用 .parents(".panel-body") 时......我希望整个 div 都在可见帧

Answer 1

如果父级是 <div>，则需要 tabindex 属性。像这样尝试

$("input[value*='three']:checked:eq(" + target + ")")
.parent(".panel-body").attr("tabindex",-1).focus();

或将 tabindex 属性添加到 html 标签，如

<div class="panel-body" tabindex="-1">
</div>

并在您的代码中像旧表达式一样使用：

$("input[value*='three']:checked:eq(" + target + ")").parents(".panel-body").focus();

更新： *如果你不想改变 html 你可以通过 jquery 代码做同样的事情

$("input[value*='three']:checked:eq(" + target + ")").parents(".panel-body").attr('tabindex','-1').focus();

Answer 2

如果您无法更改 html 文件，您可以使用以下方法滚动到 div：

//your stuff goes here
$('html, body').animate({ scrollTop: $('.panel-body').offset().top }, 'fast');

使用 jquery 将焦点（或滚动到视图中）到面板

Get focus(or scroll into view) to a panel using jquery

javascript

jquery

panel

js-scrollintoview