delmalki delmalki - 6 months ago 26
Javascript Question

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

Answer

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