Ciao a tutti, un pò per studio ed un pò per necessità ho cerceto di trovare un modo per far funzionare questo metodo anche su internet explorer. So che ci sono librerie in jquery o mootools che lo fanno, ma come dicevo sopra ho provato ad intestardirmi per cercare di imparare meglio javascript. Ho scritto una piccola classe , probabilmente mooolto migliorabile, ma voglio provare a condividere. Un limite, oltre ad altri che potrete eventualmente evidenziare voi, è che per funzionare bisogna valorizzare l'attribbuto title.
Ho testato solo con ie 9
Codice PHP:
var ie = (navigator.appName == "Microsoft Internet Explorer");
function placeholderIE(){
if(!ie){return;}
//costruttore
this.input=document.getElementsByTagName('input');//recupero tutti i campi input
this.passEl=new Array(); //array per memorzzare l'indice numerico di eventuali input type="password"
this.contaInput=this.input.length;//conto l'array input
for(i=0;i<this.contaInput;i++){
if(this.input[i].title){//se l'elemento ha l'attributo title valorizzato..
if(this.input[i].type=='password'){
this.passEl[i]=i;//memorizzo l'indice se il campo è settato come password
this.input[i].type='text';//e lo setto in type="text" altrimenti il placeholder apparirebbe con gli asterischi o pallini
}
this.input[i].value=this.input[i].title;//scrivo nel campo il valore dell'attributo title
}
}//fine costruttore
//si attiva sul onfocus
this.placeholderOff=function(element,index){
//con l'evento onfocus
if(element.value==element.title){//se il valore è quello del title
element.value='';//..svuoto il campo
if(index==this.passEl[index]){
element.type='password';
}//se il parametro index è presente nell'array in cui abbiamo memorizzato gli indici dei campi password setto il campo a password
}//in modo che quando l'utente scrive appaino gli asterischi
}
//si attiva sul onblur
this.placeholderOn=function(element){
if(element.value==''){//solo se quando l'utente abbandona il campo di testo questo è vuoto.
element.value=element.title;//rimetto il placeholder
if(element.type='password'){element.type='text';} //altrimenti apparirebbero gli asterischi al posto dei pallini
}
}
}
//questa funzione deve essere richiamata nell'onload, o come window.onload=function{loadPlaceholderIE();} o nel body <body onload="loadPlaceholderIE();">
var loadPlaceholderIE=function(){
placeholderIE= new placeholderIE();
if(ie){
var input=document.getElementsByTagName('input');//recupero tutti i tag imput
var inputs=input.length;
for(i=0;i<inputs;i++){
if(input[i].title){
//purtroppo il this non funziona, sembra che con ie nella closure non si riesca a passare un parametro esterno
// ad esempio avrei preferito fare
//input[i].attachEvent("onfocus", function(){placeholderIE.placeholderOff(input[i])});
//oppure
//input[i].attachEvent("onfocus", function(){placeholderIE.placeholderOff(this)});
//ma non funzione in nessun modo
//allora per cercare di ovviare uso eval
var cicloVar='var el'+i+'=input['+i+'];';
var cicloFunz='var cl'+i+'=function(){return el'+i+';};';
var cicloAttOff='input['+i+'].attachEvent("onfocus", function(){placeholderIE.placeholderOff(cl'+i+'(),'+i+')});'
var cicloAttOn='input['+i+'].attachEvent("onblur", function(){placeholderIE.placeholderOn(cl'+i+'())});'
eval(cicloVar);
eval(cicloFunz);
eval(cicloAttOff);
eval(cicloAttOn);
//var a=function(){return el;}
//eval(cicloVar);
//eval(cicloFunz);
//input[i].focus=placeholderIE.placeholderOff(this);
//input[i].blur=placeholderIE.placeholderOn(this);
//input[i].attachEvent("onfocus", function(){alert(i)}); //placeholderIE.placeholderOff(this.input[i]}); //se fosse moz o crome input[i].addEventListener("focus", function(){placeholderIE.placeholderOff(this)},false);
//input[i].attachEvent("onblur", function(){placeholderIE.placeholderOn(this)});
}
}
}
}
Grazie per eventuali suggerimenti