×
COOKIES
Prezeraním tejto stránky dochádza k spracovaniu cookies. Spracovaniu cookies zabránite v nastaveniach internetového prehliadača alebo nezobrazovaním tejto stránky v internetovom prehliadači.
Vytvárame riešenia

Ako sfunkčniť data-dojo-attach-event ak je pole disabled

Cross browser compatibility (XBC) je aj v dnešnej dobe stále aktuálnou problematikou, ktorú je potrebné neustále riešiť aj napriek tomu, ak sú použité populárne frameworky. Ako príklad možno uviesť framework Dojo Toolkit a problém s atribútom data-dojo-attach-event v prehliadačoch Firefox a Opera (Presto). Oba prehliadače neviedia aplikovať data-dojo-attach-event na polia formulára s atribútom disabled.
Pre odstránenie tohto problému je potrebné namiesto atribútu disabled aplikovať atribút readonly a dijit TextBox rozšíriť o ďalšie vlastnosti jazyka CSS. Dôvodom aplikovania vlastností jazyka CSS je skutočnosť, že kontrolky typu disabled majú inú farbu okrajov, pozadia a textu.
Obrázok: Element <input> po aplikovaní atribútu readonly bez CSS (vpravo).
Element <input> po aplikovaní atribútu readonly bez CSS (vpravo).
Uvedený problém s prehliadačom Firefox je demonštrovaný na nasledujúcom príklade.
Príklad: Obsah súboru firefox-issue.html.
1
2
3
4
5
6
7
8
9
10
11
<div data-dojo-type="formField"></h2>
<script>
require(["dojo/ready", "widget", "dojo/parser"],
function(ready) {
ready(function() {
});
});
</script>
Príklad: Obsah súboru widget.js.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
define([
"dojo/_base/declare",
"dijit/_Widget",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojo/text!template.html",
"dijit/form/TextBox"
],
function(
declare,
_Widget,
_WidgetBase,
_TemplatedMixin,
_WidgetsInTemplateMixin,
template
) {
return declare("formField", [
_Widget,
_TemplatedMixin,
_WidgetsInTemplateMixin
], {
templateString: template,
displayMessage: function() {
console.log("Clicked");
}
});
});
Príklad: Obsah súboru template.html.
1
2
3
4
5
6
<div>
<input data-dojo-type="dijit/form/TextBox" value="value"
disabled data-dojo-attach-event="click : displayMessage">
<input data-dojo-type="dijit/form/TextBox" value="value"
readonly data-dojo-attach-event="click : displayMessage">
</div>
Ako vidieť, prvé pole s atribútom disabled na kliknutie nereaguje. Druhé pole už na kliknutie reaguje, ale vizuálne nezodpovedá polu s atribútom disabled. Pre odstránenie tohto nedostatku je potrebné upraviť súbor template.html a doplniť vlastnosti jazyka CSS pre dijit TextBox. Vlastnosti musia byť so zápisom !important, inak nebudú na dijit aplikované.
Príklad: Obsah upraveného súboru template.html.
1
2
3
4
5
6
7
<div>
<input data-dojo-type="dijit/form/TextBox" value="value"
disabled data-dojo-attach-event="click : displayMessage">
<input class="firefox" data-dojo-type="dijit/form/TextBox"
value="value" readonly
data-dojo-attach-event="click : displayMessage">
</div>
Príklad: Obsah elementu <style>.
1
2
3
4
5
6
7
.firefox {
background-color: #efefef !important;
border-color : #d3d3d3 !important;
}
.firefox input {
color : #757575 !important;
}
Obrázok: Element <input> po aplikovaní atribútu readonly a CSS (vpravo).
Element <input> po aplikovaní atribútu readonly a CSS (vpravo).

Záver

Prostredníctvom uvedených zmien a rozšírení bude vo Firefoxe a Opere funkčný atribút data-dojo-attach-event pričom to, že je požitý atribút readonly namiesto atribútu disabled nebude viditeľné.


Dojo,dijit/form/TextBox,data-dojo-attach-event,readonly,disabled
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších