为什么切换到 DojoX 网格会导致 JavaScript“无法将焦点移至控制”错误？答案

【问题标题】：Why does tabbing to a DojoX grid result in a JavaScript "Can't move focus to control" error?为什么切换到 DojoX 网格会导致 JavaScript“无法将焦点移至控制”错误？
【发布时间】：2008-11-26 15:55:56
【问题描述】：

问题
我在一个页面上有许多 Dojo 组件。当用户尝试从类似输入的组件切换到类似网格的组件时，我收到 JavaScript“无法将焦点移动到控件”错误。用户群使用 IE6。

解决方案
DojoX Grid 布局中的第一个元素不能隐藏。如果它被隐藏，您会收到一个 JavaScript“无法将焦点移动到控件”错误。为了解决这个问题，我添加了一个显示的行#。见下文。

  var gridLayout = [
    new dojox.grid.cells.RowIndex({ name: "row #", 
                                    width: 2, 
                                    styles: "text-align: right;"
                                 }),
    {
      field: "ele_id",
      name: "Element ID",
      styles: "text-align:right;",
      width:5,
      hidden:"true"           
    },
    {
      field: "ele_nm",
      name: "Element Name",
      styles: "text-align:left;",
      width:8          
    }
  ];

【问题讨论】：

你为什么要那个？？？如果用户想要导航到某个输入字段，他应该能够，不是吗？您想阻止任何导航到该字段还是仅基于选项卡？
Z 不是输入字段。我在一个页面上有许多 Dojo 组件。当用户尝试从类似输入的组件切换到类似网格的组件时，我收到 JavaScript“无法将焦点移动到控件”错误。

标签： javascript grid dojo

【解决方案1】：

防止标签可能会干扰使用屏幕阅读器浏览您网站的视力不佳的用户。

【讨论】：

我澄清了上面的问题。感谢您指出了这一点。你还有什么其他方法可以处理这样的事情？

【解决方案2】：

如果输入 Y 不接受用户输入，则不要将其设为输入字段！

如果您只是将其用于值显示，请改用样式 <span> 或 <div>。

【讨论】：

同意。设计良好的应用没有理由要求禁用 Tab 键。这就像在问“我可以禁用后退按钮吗？”你只是不这样做。这是预期标准的一部分。
我举了一个不好的例子。问题是从输入字段切换到无法处理的网格组件。我正在尝试防止发生 JavaScript 错误。

【解决方案3】：

我个人认为这种行为有点烦人。为什么要禁止用户专注于该领域？

更好的解决方案是隐藏/禁用该字段，直到准备好将数据输入其中。您还应该有一些文字来解释为什么该字段被禁用。

编辑：您发布的错误消息在谷歌上有一些结果，但似乎它可能是任意数量的问题，这个http://www.francoisfaubert.com/2008/03/06/cant-move-focus-to-control/ 听起来可能是一种可能性。检查您的 HTML 以查看页面上是否有其他具有相同 ID 的控件。

【讨论】：

澄清了上述问题。这是为了防止有人从输入字段切换到网格组件。你还建议用什么其他方法来处理它？
这个“网格组件”是什么？
我使用的 Grid 是一个 DojoX 组件。
不是 ID 问题。是的，谷歌搜索无效，所以我想我会在这里试一试。

【解决方案4】：

您可以将 Input-Z 设置为禁用控件。然后，当用户进入 Input-Y 并填写它时，将 Input-Z 更改为启用。你是怎么做到的：

<input id="Input-x" type="text" />
<input id="Input-y" type="text" onChange="document.getElementById('Input_Z').removeAttribute('disabled');" />
<input id="Input-z" type="text" disabled />

【讨论】：

【解决方案5】：

您必须处理 keydown 事件并监听字符 9（这是制表符）。要使事件无效，您只需在用户按下字符 9 时返回 false。

function handleKeyDown(e)

{

var keynum;

var keychar;

var numcheck;

if(window.event) // IE

{

keynum = e.keyCode;

}

else if(e.which) // Netscape/Firefox/Opera

{

keynum = e.which;

}

return keynum != 9; `` }

【讨论】：

您也必须处理相反方向的 shift-tab。

【解决方案6】：

在您的 cmets 澄清问题后，我了解您需要用户不能使用 tab 键聚焦元素。尝试添加到元素：

tabindex="-1"

举例：

<div id="mygrid" tabindex="-1"> <!-- Some stuff here --> </div>

关于负标签索引的更多信息：introduction-to-wai-aria

编辑：更多关于 ARIA 的信息：http://www.w3.org/WAI/intro/aria

【讨论】：

【解决方案7】：

关于错误信息：来自Fake's tank：

“很可能你的文档中有冲突的 id。另外，请记住 IE 7 和以前的版本认为 name 属性应该像 id 一样对待。”

首先，这是一个特定于 IE 的错误。其次，去改变你的身份证。它似乎是之前困扰一些惠普基于 html 的软件的问题，并且在用户从 IE6 升级到 IE7 时出现。

关于禁用焦点的问题 - 只需在标签中使用 type=hidden 隐藏任何不需要的输入，它们将不再是问题。永远不要乱用人们的标签 - 这是用 html 比 Windows 应用程序改进的一件事。

故事的寓意：

正确操作
微软在 Web 方面一败涂地
不要乱用标准的 GUI 行为

【讨论】：

【解决方案8】：

<input name="z" onfocus="this.blur()"/>

【讨论】：

我认为这对用户来说可能很烦人：他会尝试再次聚焦元素，但焦点总是转到另一个元素......
我同意。我只是想回答这个问题。

【解决方案9】：

给组件元素一个tabindex属性，值为-1

【讨论】：

【解决方案10】：

解决方案
DojoX Grid 布局中的第一个元素不能隐藏。如果它被隐藏，您会收到一个 JavaScript“无法将焦点移动到控制”错误。为了解决这个问题，我添加了一行 # 来显示。见下文。

  var gridLayout = [
    new dojox.grid.cells.RowIndex({ name: "row #", 
                                    width: 2, 
                                    styles: "text-align: right;"
                                 }),
    {
      field: "ele_id",
      name: "Element ID",
      styles: "text-align:right;",
      width:5,
      hidden:"true"           
    },
    {
      field: "ele_nm",
      name: "Element Name",
      styles: "text-align:left;",
      width:8          
    }
  ];

【讨论】：