Question

我正在使用jquery context-menu插件。但是，在选择禁用的输入时，上下文菜单切换不起作用。这是jsfiddle。 jsfiddle非常自我解释，添加到输入的disabled标记使插件的行为不符合预期。

jsfiddle 和实际代码

<h1>INPUT DISABLED NOT WORKING</h1>
<input class='notworking' disabled>
<h1>REGULAR DIV WORKING</h1>
<div class="working" style='with:50px;height:50px;background:red;'>
</div>

$.contextMenu({
selector: 'div.working',
trigger: 'left',
callback: function(key, options) {},
items: {
"P9": {
  name: "Set AAA grade",
  icon: "edit"
},
"P8": {
  name: "Set AA grade",
  icon: "edit"
},
"P7": {
  name: "Set A grade",
  icon: "edit"
},
"P6": {
  name: "Set BBB grade",
  icon: "edit"
},
"P5": {
  name: "Set BB grade",
  icon: "edit"
},
"P4": {
  name: "Set B grade",
  icon: "edit"
},
"P3": {
  name: "Set CCC grade",
  icon: "edit"
},
"P2": {
  name: "Set CC grade",
  icon: "edit"
},
"P1": {
  name: "Set C grade",
  icon: "edit"
   }
 }
  });
 $.contextMenu({
 selector: 'input.notworking',
trigger: 'left',
callback: function(key, options) {},
items: {
"P9": {
  name: "Set AAA grade",
  icon: "edit"
},
"P8": {
  name: "Set AA grade",
  icon: "edit"
},
"P7": {
  name: "Set A grade",
  icon: "edit"
},
"P6": {
  name: "Set BBB grade",
  icon: "edit"
},
"P5": {
  name: "Set BB grade",
  icon: "edit"
},
"P4": {
  name: "Set B grade",
  icon: "edit"
},
"P3": {
  name: "Set CCC grade",
  icon: "edit"
},
"P2": {
  name: "Set CC grade",
  icon: "edit"
},
"P1": {
  name: "Set C grade",
  icon: "edit"
}
 }
 });

Answer 1

浏览器会阻止禁用的元素被聚焦，这会覆盖javascript。如果您将disabled更改为readonly，则上下文脚本可以正常工作，并且输入仍然可以防止用户更改。您可以通过添加一些CSS颜色（最好在样式表中）使其看起来禁用：

<input class="notworking" readlony style="background:#f0f0f0;border:1px solid #ccc;">

jquery上下文菜单禁用输入

1 个答案: