2016-05-22 5 views
0

Я использую плагин контекстного меню jquery. Однако при выборе отключенного входа переключатель контекстного меню не будет работать. Вот jsfiddle. jsfiddle вполне объяснимо, тег disabled, добавленный к вводу, делает плагин не таким, как ожидалось.jQuery контекстное меню отключено вход

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

ответ

1

Браузеры предотвращения инвалидов элементы должны быть сфокусированы, это перекрывает JavaScript. Если вы меняете disabled на readonly, сценарий контекста работает, и вход по-прежнему защищен от изменений пользователя. Вы можете отключить его, добавив некоторые цвета css (желательно в вашей таблице стилей):

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

приятный, простой и рабочий по назначению. – delmalki

Смежные вопросы