jquery context-menu disabled input

Question

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

M4tini · Accepted Answer · 2016-05-22 19:46:16Z

1

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

edited May 22, 2016 at 19:46

answered May 22, 2016 at 19:34

M4tini

4461 gold badge6 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery context-menu disabled input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related