CODEWITHSUNDEEP
javascriptjquerycontextmenu
delmalki
delmalki

Reputation: 1364

jquery context-menu disabled input

I'm using the jquery context-menu plugin. However, when choosing an input that is disabled, the context-menu toggle won't work. Here is the jsfiddle. The jsfiddle is quite self explanatory, the disabled tag added to the input makes the plugin not behave as expected.

jsfiddle And the actual code

<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"
}
 }
 });

Upvotes: 0

Views: 136

Answers (1)

M4tini
M4tini

Reputation: 446

Browsers prevent disabled elements to be focussed, this overrides javascript. If you change disabled to readonly the context script works and the input is still protected from user changes. You can make it look disabled by adding some css colors (preferrably in your stylesheet):

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

Upvotes: 1

Related Questions