使用键盘浏览输入字段

Question

当我单击链接时，将显示一个div。 在这个div内，有一些输入字段，即复选框。 默认情况下已选中其中一些。

我要完成的事情是，当打开div时，我希望使用户能够直接在此复选框之间进行制表/导航。

现在，我必须按一下选项卡按钮几次才能使第一个复选框“处于焦点”状态，这样我才能开始导航。 我想在用户打开div时直接执行此操作，而无需两次单击选项卡按钮。

我试图模拟这样的点击事件：

$('#categoryBasic').click(function () {
    $('#DatabasesValue-1').click();
});

但这不起作用。

单击链接时，以下是打开的div：

<div id="divInputBasic" class="divInput">
    <div id="basicContainer1">
        <div class="basicContainer1 left" style="float: left; width: 35%">
            <label class="small-space-bottom inline-block bold-text">Databas</label>
            <div id="divValueDatabases" class="checkboxButtonGroupSelector">
                @{
                    foreach (var database in PageData["Databases"])
                    {
                        System.Text.StringBuilder sb = new System.Text.StringBuilder();
                        sb.Append(
                            "<input " +
                            "id=\"DatabasesValue-" + database.Id + "\" " +
                            "name=\"DatabasesValue\" " +
                            "type=\"radio\" " +
                            "value=\"" + database.Id + "\" " +
                            (database.Checked ? "checked=\"checked\" " : string.Empty) +
                            (database.Disabled ? "disabled=\"disabled\" " : string.Empty) +
                            "title=\"" + database.Description + "\"" +
                            " />" +
                            "<label " +
                            "for=\"DatabasesValue-" + database.Id + "\" " +
                            "title=\"" + database.Description + "\"" +
                            ">" + database.Description + "</label>" +
                            "<br />"
                            );

                        @Html.Raw(sb);
                    }
                }
            </div>
        </div>
        <div class="basicContainer1" style="float: left; width: 35%">
            <label class="small-space-bottom inline-block bold-text">Källa</label>
            <div id="divValueDataSources" class="checkboxButtonGroupSelector small-space-bottom">
                @{
                    foreach (var dataSource in PageData["DataSources"])
                    {
                        System.Text.StringBuilder sb = new System.Text.StringBuilder();
                        sb.Append(
                            "<input " +
                            "id=\"DataSourcesValue-" + dataSource.Id + "\" " +
                            "name=\"DataSourcesValue\" " +
                            "type=\"radio\" " +
                            "value=\"" + dataSource.Id + "\" " +
                            (dataSource.Checked ? "checked=\"checked\" " : string.Empty) +
                            (dataSource.Disabled ? "disabled=\"disabled\" " : string.Empty) +
                            "title=\"" + dataSource.Description + "\"" +
                            " />" +
                            "<label " +
                            "for=\"DataSourcesValue-" + dataSource.Id + "\" " +
                            "title=\"" + dataSource.Description + "\"" +
                            ">" + dataSource.Description + "</label>" +
                            "<br />"
                            );

                        @Html.Raw(sb);
                    }
                }
            </div>
        </div>
        <div class="basicContainer1 left" style="float: left; width: 20%">
            <label class="small-space-bottom inline-block bold-text">Nivå</label>
            <div id="divValueDataSelections" class="checkboxButtonGroupSelector">
                @{
                    foreach (var dataSelection in PageData["DataSelections"])
                    {
                        System.Text.StringBuilder sb = new System.Text.StringBuilder();
                        sb.Append(
                            "<input " +
                            "id=\"DataSelectionsValue-" + dataSelection.Id + "\" " +
                            "name=\"DataSelectionsValue\" " +
                            "type=\"radio\" " +
                            "value=\"" + dataSelection.Id + "\" " +
                            (dataSelection.Checked ? "checked=\"checked\" " : string.Empty) +
                            (dataSelection.Disabled ? "disabled=\"disabled\" " : string.Empty) +
                            "title=\"" + dataSelection.Description + "\"" +
                            " />" +
                            "<label " +
                            "for=\"DataSelectionsValue-" + dataSelection.Id + "\" " +
                            "title=\"" + dataSelection.Description + "\"" +
                            ">" + dataSelection.Description + "</label>" +
                            "<br />"
                            );

                        @Html.Raw(sb);
                    }
                }
            </div>
        </div>

        <div class="basicContainer2 left" style="float: left; width: 20%">
            <label class="small-space-bottom inline-block bold-text">Olycks-ID</label>
                <div id="accidentField">
                    <input type="text" name="accidentId" id="accidentId"/>
                </div>    
          </div>
    </div>
</div>

Answer 1

您可以在触发click之后focus输入：

$('#categoryBasic').click(function () {
    $('#DatabasesValue-1').click();
    $('#DatabasesValue-1').find(':checkbox').first().focus();
});

检查代码段：

 $('#categoryBasic').click(function() { $('#DatabasesValue-1').show().find(':checkbox').first().focus(); }); 

 #DatabasesValue-1 { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='categoryBasic'>click</div> <div id='DatabasesValue-1'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> </div> 

Answer 2

您是否尝试过使用tabindex属性？ tabindex文档

或者您可以将代码更改为此

$('#categoryBasic').click(function () {
    $('#DatabasesValue-1').trigger('click');
});

Answer 3

您可以尝试使用focus ，请参见以下小提琴：

的JavaScript

$('#categoryBasic').click(function () {
    $('.hidden').show();
    $("#DatabasesValue-1").focus();
});

的HTML

<button id="categoryBasic">
    Click me!
</button>
<div class="hidden">
    <input type="text"/><br/>
    <input type="text"/><br/>
    <input type="checkbox" id="DatabasesValue-1"/>
    <label for="DatabasesValue-1">Text 1</label><br/>
    <input type="checkbox" id="DatabasesValue-2"/>
    <label for="DatabasesValue-1">Text 2</label><br/>
    <input type="checkbox" id="DatabasesValue-3"/>
    <label for="DatabasesValue-1">Text 3</label><br/>
</div>

的CSS

.hidden{
    display: none;
}