如何将焦点设置到 HTML5 画布元素？答案

【问题标题】：How do you set focus to the HTML5 canvas element?如何将焦点设置到 HTML5 画布元素？
【发布时间】：2013-05-14 20:26:18
【问题描述】：

我在 iMac 上的 Firefox 2.0.0.16 和 Safari 3.1.2 中使用 HTML5 <canvas> 元素。（我也在 Windows 上的 Firefox 3.0 中尝试过，但也无济于事。）标签如下所示：

<td>
   <canvas id="display"
           width="500px"
           height="500px">
   </canvas>
</td>

我有一个按钮来“激活”一些与画布交互的功能。该按钮的onclick() 事件调用了一个函数。在该函数中，我有以下行：

document.getElementById("display").focus();

这不起作用。 Firebug 报告没有错误。但焦点仍然在原处。我可以单击画布或朝向画布的选项卡，焦点将从其他元素中丢失，但显然永远不会被画布获得（画布的onfocus() 事件永远不会触发）。

我觉得这很奇怪。是画布根本无法获得焦点，还是我在这里遗漏了什么？任何见解将不胜感激。

谢谢。

【问题讨论】：

【解决方案1】：

给画布一个标签索引：

   <canvas id="display"
           width="500px"
           height="500px"
           tabindex="1">
   </canvas>

【讨论】：