×
Creating solutions

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
No part of this article may be reproduced without mention of the author and URL to this website.
For more information, see the About section.

Comments

Article has no comments.

Add a comment

Name (required)
Website
Message (required)
Submit
From latest