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).

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

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é.

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

Záver

Komentáre

Pridať komentár