使用键盘浏览输入字段

Question

当我用户点击一个链接时，会显示一个 div。在这个 div 里面，有一些输入字段，复选框。其中一些是默认选中的。

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

现在，我必须按几次制表键才能使第一个复选框“聚焦”，这样我就可以开始导航了。我想在用户打开 div 时直接执行此操作，而无需点击两次 tab 按钮。

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

$('#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

你可以focus触发click后的输入：

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

检查sn-p：

$('#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 docs

或者你可以把你的代码改成这个

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

Answer 3

你可以试试focus，见this fiddle：

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;
}