javascript - 使用 jquery 获取焦点(或滚动到 View )到面板

Question

我正在设置一个表单，用户可以在单击按钮时看到他们对单选按钮(特定值)的选择。

我能够获得单选按钮焦点并使页面滚动到它，但想要父 panel-body专注于页面，就像 scrollintoview()但这不起作用。

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

<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();