1

我们有一个问题，禁用的表单元素（输入、文本区域、...）对右键单击操作（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 正常运行？

4

3 回答 3

4

嗯，有趣。以前从未见过。不过，可以说隐藏上下文菜单并不是完全错误的。W3C 对禁用控件有以下说法：

  • 禁用的控件不会获得焦点。
  • 在选项卡导航中会跳过禁用的控件。
  • 禁用的控件不能成功。

关于接收焦点：

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

因此，Chrome 和 FF 所显示的行为在 IMO 中是有道理的。

如何解决它的想法：

  • 在输入元素的顶部放置一个透明元素，并在那里捕获事件（呸）

  • 用于z-index: -1将禁用的元素放在容器后面 - 虽然不确定这是否适用于浏览器

  • 不要使用该disabled属性，而是使用 CSS 样式和 jQuery 解决方法来防止这些控件的值被提交

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

于 2010-11-10T13:39:44.340 回答
1

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

于 2010-11-24T14:32:44.920 回答
0

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

于 2014-01-06T01:55:38.230 回答