jquery 上下文菜单禁用输入

Question

我正在使用 jquery 上下文菜单插件。 However, when choosing an input that is disabled, the context-menu toggle won't work.这是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 上下文菜单禁用输入

jquery context-menu disabled input

javascript

jquery

contextmenu