Question

我们遇到一个问题，已禁用的表单元素（输入，textarea，...）不会对右键单击操作（oncontextmenu属性）做出反应。启用表单元素时，一切正常。请考虑以下伪代码：

<div id="test" oncontextmenu="someFunction()">
  <input id="textbox" type="text" disabled="disabled">
  SOME_PADDING
  <input id="calendar" type="image" disabled="disabled">
</div>

真正的问题是Chrome和Firefox中的无效，但在IE8和Opera中可以正常工作。

当我们右键点击Chrome或Firefox中的文本框或日历元素时，没有任何反应。如果我们点击元素之间的（SOME_PADDING），则会出现右键单击菜单。

因此，似乎在已禁用的表单上的右键单击操作在Chrome和Firefox 中不起作用。之前有没有人经历过类似的行为？

提前致谢！
斯泰恩

编辑：正如Pekka所提到的，对右键单击没有反应的禁用表单元素确实有意义。真正的问题似乎是它周围的div的oncontextmenu属性在点击Firefox / Chrome中的禁用表单元素时没有正确反应。

EDIT2：在线示例可以在这里找到：http://jsbin.com/isite4/6 - 这适用于IE8以外的所有功能。任何提议的解决办法迫使IE表现正常吗？

Answer 1

嗯，有趣的。从来没见过这个。可以说，隐藏上下文菜单并不完全错误。关于禁用控件，W3C有the following说明：

已禁用的控件无法获得焦点。

在标签导航中跳过已禁用的控件。

禁用的控件无法成功。

关于获得焦点：

在HTML文档中，元素必须从用户那里获得焦点才能变为活动状态并执行其任务。

所以Chrome和FF显示的行为对IMO来说很有意义。

如何解决它的想法：

在输入元素的顶部放置一个透明元素，并在那里捕捉事件（yuck）
使用z-index: -1将已禁用的元素放在容器后面 - 不确定这是否适用于浏览器
不使用disabled属性，但使用CSS样式和jQuery解决方法来阻止提交这些控件的值

我认为后者是最好的建议。

Answer 2

我们选择了解决方案，因为它们似乎不是一种直截了当的方法。我们决定在禁用的表单元素上添加一个图像，它响应正常的左键单击。

Answer 3

我使用了一种更简单的方法，那就是只读取元素而不是禁用它。如果“外观”可能会使用户感到困惑，只需将“禁用”颜色与元素上的css相匹配即可。我知道它与原始海报无关，但任何想要看的人都可能受益。

禁用表单元素和oncontextmenu问题

3 个答案: