Question

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

我想要完成的事情当div打开时，我想让用户能够直接在这个复选框之间进行选项卡/ nagivate。

现在，我必须按几次标签按钮才能获得第一个复选框＆＃34;在焦点上＃34;所以我可以开始导航。我希望在用户打开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();
});

检查代码段：

＆＃13;

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

＆＃13;

#DatabasesValue-1 {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 2

您是否尝试过使用tabindex财产？ method

或者您可以将代码更改为

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

Answer 3

您可以尝试focus，请参阅this小提琴：

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

使用键盘浏览输入字段

3 个答案: