将键盘焦点设置为 <div>

IT技术 javascript jquery html setfocus
2021-02-25 08:00:37

我有以下代码片段：

<div id="listbox1div" style="z-index:95; background:white; overflow-y:auto; overflow-x:hidden; width:240; height:314px;">
<a id="focusLink2"></a>
<table id="ptObj_listbox1...

我有一个<div>动态构建元素的页面（如上面）。这<div>会在主屏幕的顶部显示数据。当页面生成 div 时，我想设置焦点。我无法在 body 标签上放置 onLoad 函数，因为我不知道何时会生成 div。

一个<div>标签不能有焦点设置在其上直接。所以我<a>在下面的函数中放置了一个带有 id的空标签：

function setTableFocus(count){
        var flinkText = 'focusLink'+count;
       document.getElementById(flinkText).focus();
}

我没有收到任何错误，并且我知道在显示页面时正在调用该函数（通过警报）。但是，当我使用箭头键或输入按钮时，整个页面都会移动（甚至不是呈现数据的 div）。

当我点击表格元素之一（使用鼠标）。之后，keydown 事件开始工作。我希望这样做是将数据呈现给用户并自动由键盘驱动。

有没有人对我如何做到这一点有任何建议？

6个回答

div如果添加tabindex属性，则可以使焦点成为焦点。

请参阅：http : //snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex

tabindex 值可以允许一些有趣的行为。

  • 如果给定值“-1”，则该元素不能被制表，但可以通过编程方式（使用 element.focus()）将焦点赋予该元素。
  • 如果给定值为 0，则该元素可以通过键盘获得焦点并落入文档的 Tab 流中。
  • 大于 0 的值创建一个优先级，其中 1 是最重要的。

更新：在http://jsfiddle.net/roberkules/sXj9m/添加了一个简单的演示

甜的。我有一个模态对话框，除非我有焦点，否则我无法取消。它自动聚焦到第一个字段，但我有时禁用该字段（编辑而不是添加）。我不想自动关注下一个字段，因为它有占位符文本。所以我就像“我不能只关注一个 div 吗？” 所以我在禁用字段的父 div 上放置了一个 tabIndex 为 0 并且它可以工作。谢谢！
2021-04-24 08:00:37

动态生成 div 的函数将有上下文可用于知道要关注哪个 div，在最后一个div输出带有 scrollTo()的脚本以关注您想要的 div 之后。为每个 div 分配一个 ID，这样您就可以从集合中选择它。

Response.Write "
<script language='text/javascript'>
document.getElementById('div#').scrollIntoView();
</script>
"
您知道如何使用 VBScript 将焦点设置到 div 上吗？
2021-04-21 08:00:37
使用 scrollIntoView() 函数代替 focus() 函数。
2021-04-26 08:00:37
您实际上需要将 javascript 输出到页面，该页面将由浏览器处理以设置焦点。您不能直接从 asp 设置焦点。
2021-05-11 08:00:37
看到我更新的答案。您需要将 id="myDiv13" 添加到每个 div，然后您可以根据最后的一些逻辑选择您想要的。
2021-05-12 08:00:37
@Jeff - 如果您提供一个（精简的）示例，包括一些 asp 代码，也许最好？
2021-05-12 08:00:37

你不能聚焦一个 div。你的意思是重点输入？

无论如何，您可以包含一个简短的脚本标记来聚焦 HTML 中的某些内容 - 只需将脚本放在 div 之后 - 甚至在 div 内。

也许焦点不是正确的词然后...。基本上当屏幕显示时，我希望能够使用键盘向下移动表格（行）。难道不应该有某种焦点吗？也许它被称为别的东西。
2021-04-15 08:00:37
当然是javascript。并且 div 和 table 不能有焦点。（焦点表示光标在闪烁，准备好输入。）
2021-04-21 08:00:37
我有一个 div 和一个正在生成的表。我需要 div 或 table 才能获得焦点。您所指的脚本是 vbscript 还是 javascript？
2021-04-27 08:00:37
嗯，键盘可以滚动页面。但是，如果您真的想使用键盘跳转到每一行（就像 gmail 对每封电子邮件所做的那样），您需要专门进行编程。
2021-05-01 08:00:37
现在页面只是在一种模态屏幕（不是真正的模态）中显示 div 和表格，但我需要点击表格才能实际然后能够在表格中上下导航......我是什么要求是在加载后模仿点击进入表格
2021-05-13 08:00:37

你在控制asp函数吗？如果是，那么这将是最容易设置焦点的地方。否则，您可以侦听DOMNodeInserted事件（注意：浏览器支持可能会有所不同）并div根据适当的条件将焦点设置为（或其子项）。

你可以使用getElementsByClassName

<div tabindex="0" class="to-focus">TEXT</div>
<script> document.getElementsByClassName('to-focus')[0].focus()</script>
其它你可能感兴趣的问题
上一篇<canvas> 元素中的文本换行 下一篇提交表单而不重新加载页面