代码之家 › 专栏 › 技术社区 › Stu Care

Javascript/jQuery:如何基于tab-press识别所选项目?

accessibility jquery javascript

Stu Care · 技术社区 · 7 年前

我正在努力识别当前通过tab键选择/聚焦/突出显示的元素。

我正在尝试为当前选定的项目启动enter键功能。代码应该是不言自明的,但我的问题是,目前,我可以通过选项卡选择 tr (其中包含 data-href 属性)按enter键,然后按logged this 是 body 要素

$(document.activeElement).keypress(function (event) {
  if (event.which == 13) {
    //console.log(this);
    onRowClick();
  }
});

function onRowClick() {
  var href = $(this).data('url');

  if (href != undefined) {
    window.location.href = href;
  }
}

我试过更换 $(document.activeElement) 使用:

$('tr:focus')
$('tr:active')

简化版本: https://jsfiddle.net/stucare/59ghLmtv/

我希望这是有意义的,并且是适当的。提前谢谢。

表格HTML(CSHTML)

<table id="ChainResultsTable" class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th>
                <div>
                    <div>
                        Last Updated
                    </div>
                    <div>
                        Last Updated
                    </div>
                </div>
            </th>
            <th>
                <div>
                    <div>
                        Properties
                    </div>
                    <div>
                        Properties
                    </div>
                </div>
            </th>
            <th>
                <div>
                    <div>
                        Number of Properties
                    </div>
                    <div>
                        Number of Properties
                    </div>
                </div>
            </th>
            <th>
                <div>
                    <div>
                        Chain Status
                    </div>
                    <div>
                        Chain Status
                    </div>
                </div>
            </th>
            @if (Model.ShowChaseDetails)
            {
                <th>
                    <div>
                        <div>
                            Activity
                        </div>
                        <div>
                            Activity
                        </div>
                    </div>
                </th>
            }
            <th class="scrollbarhead"></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var row in Model.ChainSearchRowList.Data)
        {
            <tr data-chainid="@row.ChainId" data-url="/EstateAgents/ChainDetails/Index/@row.ChainId" tabindex="0">

                <td style="width: 150px">
                    @row.LastUpdated.TimeAgo()
                </td>
                <td>
                    @Html.Raw(row.Postcodes.Replace(" ", "&nbsp;").Replace(",", "&nbsp;&nbsp; "))
                </td>
                <td style="width: 150px">
                    @row.NodeCount
                </td>
                <td style="width: 120px">
                    @switch (row.ChainStatusId)
                    {
                        case ChainStatusValues.Active:
                            {
                                <span>@ChainStatusDescriptions.Active</span>
                            }
                            break;
                        case ChainStatusValues.Archived:
                            {
                                <span>@ChainStatusDescriptions.Archived</span>
                            }
                            break;
                        case ChainStatusValues.Complete:
                            {
                                <span>@ChainStatusDescriptions.Complete</span>
                            }
                            break;
                    }
                </td>
                @if (Model.ShowChaseDetails)
                {
                    <td>

                        @if (row.IsChasable)
                        {
                            switch (row.ChainChaseStatusId)
                            {
                                case ChainChaseStatusValues.ChaseInProgress:
                                    <span>Calling</span>
                                    break;
                                case ChainChaseStatusValues.ChaseWaiting:
                                <span>Waiting for Buyers</span>
                                    break;
                                case ChainChaseStatusValues.ChaseComplete:
                                <span>Complete</span>
                                    break;
                                case null:
                                <span></span>
                                    break;

                                default:
                                <span>Unknown</span>
                                    break;
                            }
                        }
                        else
                        {
                            <span></span>
                        }

                    </td>
                }

            </tr>
        }
        @if (!Model.ChainSearchRowList.Data.Any())
        {
            <tr class="no-results-no-hover">
                <td colspan="100%">
                    No Results
                </td>
            </tr>
        }
    </tbody>
</table>

2 回复 | 直到 7 年前

Dan_ 7 年前

在JavaScript中,根据用法和范围,引用“this”可能会有奇怪的行为。有很多方法可以绕过它,例如将元素绑定到“this”,但在这种情况下,我认为最好将触发事件的元素传递到将要处理事件的函数中,就像这样;

$(document.activeElement).keypress(function(event) {
  if (event.which == 13) {
    onRowClick($(document.activeElement));
  }
});

function onRowClick(el) {
  var elhref = $(el).data('href');

  if (elhref != undefined) {
    window.location.href = elhref;
  }
}

在上面,我将按键时处于活动状态的元素传递到onRowClick中,然后我可以通过“el”直接访问该元素的属性。

这里是一个更新的JSFIDLE,显示了更改和跳转到定位点的行。

Updated JSFiddle Example

haltersweb 7 年前

要捕获非本机可聚焦元素的焦点,请将tabindex=–1–1分配给该元素。然后元素将接受焦点,而不按制表符顺序。如果您试图在没有tabindex=–1–focus的非本机可聚焦元素上捕捉焦点,那么焦点将被分配给body标记。