Autor | Zpráva | ||
---|---|---|---|
javadotaz Profil * |
#1 · Zasláno: 10. 4. 2013, 20:51:32
Mám problémek, chci prostřednictvím js změni typ inputu z text na password, a to pomoci
document.getElementsById("lpass").type = 'password'; zajímavé je, že v FF a CHROME to jde, v IE ne. Prosím, kde by mohl být problém.? Děkuji |
||
margin Profil * |
#2 · Zasláno: 10. 4. 2013, 21:16:24
Nejde to, jde o bezpečností opatření implementované v IE, a mám za to podobný problém je i s opačným převodem password/text, jen nevím, ve kterých prohlížečích. Tuším, že se to obejít třeba tak, že (javascriptem) přečteš, co je v textovém inputu a vložíš to do password inputu.
|
||
javadotaz Profil * |
#3 · Zasláno: 10. 4. 2013, 21:25:16
Už jsem něco vygoogloval, v IE to řeší dvěma inputy a jejich přepínání viditelnosti...je to takové kostrbaté řešení.
|
||
Witiko Profil |
#4 · Zasláno: 11. 4. 2013, 00:03:16
margin:
Celkem by mě zajímal by mě důvod a přínos takového opatření vzhledem k tomu, že na čitelnost .value nemá typ vstupního pole vliv.
|
||
Chamurappi Profil |
Reaguji na margina:
„jde o bezpečností opatření implementované v IE“ Neřekl bych. Teda, možná se to někdy za nějakou podobnou výmluvu schovalo (aby třeba nešlo změnit type="hidden" na type="file" ), ale skutečnost je taková, že vlastnost type je u všech formulářových prvků pouze pro čtení.
Myslím, že je to tak spíš proto, že interně se různé typy <input> ů berou jako úplně jiné objekty (ona je vlastně tak trochu chyba návrhu HTML, že jsou odlišné ovládací prvky zapisované stejnou značkou). A změna typu je tedy něco jako změna tagName , element se kvůli ní přerodí v něco úplně jiného… takže když je tagName pouze pro čtení, nabízí se, že stejně bude fungovat i type . Nejsem si tím jistý, ale tipnul bych si, že stejný problém jako Explorer měly někdy v historii i ostatní prohlížeče. A že nebýt nároků DOMu 2 (který bohužel také bere všechny typy <input> ů jako jeden interface), měly by ho dodnes.
Hloupé je, že kvůli tomu, aby se z odesílacího tlačítka nemohlo stát zaškrtávátko, jsou znemožněné veškeré změny té vlastnosti. Zrovna text a password jsou dost podobné typy. Logičtější by mi přišlo, kdyby byl password vyznačený speciálním atributem — podobně jako je readonly , heslo by byl type="text" s writeonly :-)
Reaguji na javadotaza: „je to takové kostrbaté řešení“ Je, ale o ničem hezčím nevím. Jen pro informaci: V novějších verzích Exploreru by ta změna typu už měla fungovat také. V desítce si uživatel může kliknout na očičko a heslo si zviditelnit (bez asistence JavaScriptu). Mimochodem, máš zvláštní jméno. |
||
Časová prodleva: 5 měsíců
|
|||
blahapet Profil |
#6 · Zasláno: 6. 9. 2013, 06:02:58
Řešil jsem podobný problém, v IE 10 to jde bez problémů, ve starších verzích netuším.
|
||
Časová prodleva: 7 měsíců
|
|||
javadotaz Profil * |
#7 · Zasláno: 10. 4. 2014, 08:36:06
Bohužel opět se vracím k původnímu dotazu, jelikož jsem zatím nedošel ke konečnému řešení.
Jen pro upřesnění, na problém jsem zakopnul v IE8, v IE10 je vše ok. Mám klasický input prvek: <input id="lpass" class="edit" type="text" name="lpass" value="" maxlength="30" onkeyup="ValidLogin(this,'login-err')"> ve funkci ValidLogin bych dle situace chtěl input změnit na type='password'. v jiných prohlížečích to jde v pohodě přes type, jenže minimálně v IE8 je to nepodporované. Přepínání viditelnosti inputů je opravdu kostrbaté řešení. Vyggogloval jsem řešení s vytvořením nového inputu s nastavení vlastností původního prvku jen změnou type: function changeInputType( , // a reference to the input element iType, // value of the type property: 'text' or 'password' iValue, // the default value, set to 'password' in the demo blankValue, // true if the value should be empty, false otherwise noFocus) { // set to true if the element should not be given focus if(!oldElm || !oldElm.parentNode || (iType.length<4) || !document.getElementById || !document.createElement) return; var isMSIE=/*@cc_on!@*/false; //http://dean.edwards.name/weblog/2007/03/sniff/ if(!isMSIE){ var newElm=document.createElement('input'); newElm.type=iType; } else { var newElm=document.createElement('span'); newElm.innerHTML='<input type="'+iType+'" name="'+oldElm.name+'">'; newElm=newElm.firstChild; } //alert(this.value); var props=['name','id','className','size','tabIndex','accessKey']; for(var i=0,l=props.length;i<l;i++){ if(oldElm[props[i]]) newElm[props[i]]=oldElm[props[i]]; } newElm.onfocus= oldElm.onfocus; newElm.onfocus=function(){return function(){ if(this.hasFocus) return; var newElm=changeInputType(this,'password',iValue, (this.value.toLowerCase()==iValue.toLowerCase())?true:false); if(newElm) newElm.hasFocus=true; }}(); newElm.onblur=function(){return function(){ if(this.hasFocus) if(this.value=='' || (this.value.toLowerCase()==iValue.toLowerCase())) { changeInputType(this,'text',iValue,false,true); } }}(); // hasFocus is to prevent a loop where onfocus is triggered over and over again newElm.hasFocus=false; // some browsers need the value set before the element is added to the page // while others need it set after if(!blankValue) { newElm.value=iValue; } oldElm.parentNode.replaceChild(newElm,oldElm); if(!isMSIE && !blankValue) { newElm.value=iValue; } if(!noFocus || typeof(noFocus)=='undefined') { window.tempElm=newElm; setTimeout("tempElm.hasFocus=true;tempElm.focus();",1); } return newElm; } Toto řešení opravdu funguje, ale je tu ještě jeden problém, daný prvek již nereaguje na událost onkeyup="ValidLogin(this,'login-err')" Jak dosáhnout toho, aby i nově vytvořený newElm reagoval na onkeyup (popř. další události) stejně jako input původní. Děkuji za radu |
||
_es Profil |
#8 · Zasláno: 10. 4. 2014, 09:01:10
javadotaz:
„aby i nově vytvořený newElm reagoval na onkeyup“ novýInput.onkeyup = starýInput.onkeyup; novýInput=funkcia; |
||
javadotaz Profil * |
#9 · Zasláno: 10. 4. 2014, 09:30:31
_es:
NO, asi to nebude tak jednoduché. novýInput.onkeyup = starýInput.onkeyup; je sice pěkné, ale po oldElm.parentNode.replaceChild(newElm,oldElm); to nereaguje vůbec!!! |
||
Časová prodleva: 10 let
|
0