onfocus cambia colore - come fare?

**Mr.Fabio** · 12-08-2005, 13:27

salve, non so se devo postare qui o nella sezione CSS, cmq

ho un campo di un form così fatto:

codice:

<input maxlength="30" name="cognome" size="19" class="campiformadmin">

qual'è la riga di codice che mi permette di fare in modo che quando l'utente clicca sul campo (praticametne onfocus

)
l'interno mi cambia colore????
grazie

**Xinod** · 12-08-2005, 14:02

IE complica tutto non supportando la pseudoclasse :focus
qui una soluzione
http://pro.html.it/articoli/id_541/i...pag_1/pag.html
ciao

**Mr.Fabio** · 12-08-2005, 16:16

QUESTO ARTICOLO E' MOLTO INTERESSANTE E UTILE , ma non capisco perche non mi funziona (Lo script per la validazione).
Ti riporto il codice che ho scritto seguendo (almeno credo)in maniera corretta le istruzioni:
(Posto solo una piccola parte della form xkè contiene molti campi e sarebbe troppo lunga)

codice:

...............
<title>Invio email</title>
<link href="stilepagine.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="validation.js"></script> 
</head>
<body onLoad="document.frmEnquiry.destinatario.focus();">
<form method="post" name="frmEnquiry" action="formcdosys.asp" >
..............
<label for="destinatario" class="req"> <input name="destinatario"  id="destinatario" size="30" maxlength="70" /></label> 
.............
<label for="oggetto" class="req"> <input name="oggetto"  id="oggetto" size="32" maxlength="30"  /></label> 
...............

nel mio foglio di stile (stilepagine.css) ho aggiunto anche la riga:

codice:

label.req2{background: #FFFFC3 url('warning.jpg') no-repeat top left; }

Per la cronaca il file .js e la jpg l'ho copiati nella stessa cartella

**Xinod** · 12-08-2005, 16:28

solito problema di + di un onload nel documento
leggi qui e cerca di adattarlo al tuo caso

**Mr.Fabio** · 12-08-2005, 20:15

Anticipazione: scusate se il post è un po lungo
Ok.....
avere + di un unload crea problemi...(ho letto sia il post che gli articoli)
Rifaccio tutto con due soli campi e senza unload nel body.
Ecco qui, ti posto il codice:
prova.asp

codice:

<html>

<head>
<title>Nuova pagina 1</title>
<link href="fogliostile.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="validation.js"></script>
</head>

<body>

<form method="post" name="frmEnquiry" action="login.asp">
  <div align="center">
    <table>
      <tr>
        <td align="center" height="19"><label for="nome_utente" class="req">
        <input id="nome_utente" NAME="nome_utente" size="20"></label> </td>
      </tr>
      <tr>
        <td align="center" height="19"><label for="password" class="req">
        <input TYPE="password" id="password" NAME="password" size="20"></label>
        </td>
      </tr>
      <tr>
        <td height="20"><center>
        <input name="show" name="show" type="image" src="images/invio.gif" />
        </center></td>
      </tr>
    </table>
  </div>
</form>

</body>

</html>

fogliostile.css

codice:

label.req2{background: #FFFFC3 url(warning.jpg) no-repeat top left}

validation.js

codice:

 
window.onload=function(){
if(!document.getElementById || !document.createElement) return;
document.forms[0].onsubmit=function(){
    if(Validate())
       document.forms[0].submit();
    else{
        alert("attenzione: alcuni campi non sono stati inseriti o l\' indirizzo email fornito non è valido");
        return(false);
        }
    }
}

function Validate(){
var labels=document.getElementsByTagName("label");
var validationOK=true;
for(var i=0;i<labels.length;i++){
    var lab=labels[i];
    if(lab.className=="req2") lab.className="req";
    if(lab.className=="req"){
        var inp=lab.getElementsByTagName("input");
        if(inp.length>0 && inp[0].value==""){
            lab.className="req2";   //input vuoto
            validationOK=false;
            } 
        if(inp.length>0 && inp[0].id=="email"){
        if(!isEmail(inp[0].value)){
            lab.className="req2";   //email non valida
            validationOK=false;
            }
        }
        if(inp.length>0 && inp[0].type=="checkbox" && inp[0].checked==false){
            lab.className="req2";   //checkbox non selezionato
            validationOK=false;
            }
        var sel=lab.getElementsByTagName("select");
        if(sel.length>0 && sel[0].selectedIndex==0){
            lab.className="req2";  //select con indice a zero
            validationOK=false;
            }
        }
    }
return(validationOK);
}

function isEmail(str){
//validazione dell'email: codice originale qui
var r1 = new RegExp("(@.*@)|(\\.\\.)|(@\\.)|(^\\.)");
var r2 = new RegExp("^.+\\@(\\[?)[a-zA-Z0-9\\-\\.]+\\.([a-zA-Z]{2,3}|[0-9]{1,3})(\\]?)$");
return (!r1.test(str) && r2.test(str));
}

Sempre per essere precisi nella stessa cartella ho:
1) fogliostile.css
2) validation.js
3)warning.jpg
Mi segnala che i campi li lascio vuoti, ma non mi appare il contorno giallo con la jpg. Il problema secondo me sta nelle righe in rosso

Discussione: onfocus cambia colore - come fare?

Strumenti discussione

Ricerca discussione

Visualizza

onfocus cambia colore - come fare?

Permessi di invio