angularjs - Fieldset and disabling all child inputs - Work around for IE -
i have fieldset has ui-view under it.
each view had lots of fields(a field directive wraps input) under it.
it looks this:
<fieldset ng-disabled='mycondition'> <div ui-view></div> // changes lot's of fields <div field='text-box'></div> </fieldset>
now, worked great, fields disabled on browsers except ie.
i've done google , seen ie doesn't support fieldset + disabled , i'm looking quick workaround.
i've tried things close not perfect , assume i'm not first 1 needs solution(even though didn't find on google).
seems related ie issues, see this , related (sorry, can't post more 2 links yet). first 1 fixed in next major ie release (edge?). second 1 still opened.
as suspect, problem user still can click inputs inside disabled fieldset edit them.
if so, there "css only" workaround ie 8+ creates transparent overlay above disabled fieldset prevents fieldset being clicked.
the workaround described in microsoft connect issues.
there fiddle, demonstrates workaround in action.
fieldset { /* set absolute position :after content */ position: relative; } /* 'screen' fieldset content clicks */ fieldset[disabled]:after { content: ' '; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; /* don't know... necessary set background */ background: url( data:image/gif;base64,r0lgodlhaqabaaaaach5baekaaealaaaaaabaaeaaaictaeaow==); }
the workaround has limitations, see code details.
there options javascript.
seems ie9+ can catch mousedown events on fieldset , call e.preventdefault() if fieldset disabled.
fieldset.onmousedown = function(e) { if (!e) e = window.event; if (fieldset.disabled) { // ie9+ if (e.preventdefault) { e.preventdefault(); } // ie8- else { // actualy not work //e.returnvalue = false; } return false; } }
for ie8 , below imposible catch bubbling mousedown events on disabled fieldset, event handlers not gets called. possible catch them on fieldset ancestors, on documetn.body exampe. again, ie8- can't prevent element being focused preventing default action of mousedown event. see jquery ticket #10345 details (sorry, can't post more 2 links). can try use unselectable attribute temporary forbid element focus. this:
document.body.onmousedown = function(e) { if (!e) e = window.event; var target = e.target || e.srcelement; if (fieldset.contains(target) && fieldset.disabled) { // no need on body!!! on fieldset /*if (e.preventdefault) { e.preventdefault(); } else {*/ // useless //e.returnvalue = false; // works fieldset.setattribute("unselectable", "on"); window.settimeout(function() { target.setattribute("unselectable", ""); },4); /*}*/ return false; } }
Comments
Post a Comment