[JS/CSS] Visualizzazione campi modificati in un form dinamica

[Marco1980]

Immaginate di avere un form con dei campi input, select, drop-down, password, text, radio.. come quelli dell'immagine..

Alcuni campi sono precompilati altri no.. Il form è in "sola visualizzazione" (diciamo che non è modificabile) fino a quando non clicco il pulsante Modifica .. Magicamente ogni campo modificabile è contornato da una linea verde (non voglio rimpiazzare lo stile ma averne uno all'esterno). Mettiamo caso che il valore di default sia "Marco".. bene avrò la mia casellina bordata di verde - grigio con all'interno "Marco". Modifico e scrivo Marco1980 altrettanto magicamente il bordo verde diventa rosso. Cambio idea.. Reset e torna verde ..
E' facile da realizzare? Buon appetito!

[Marco1980]

niente? :rollo:

[Mich_]

Si puo` fare; non e` difficile.

puoi modificare il colore del bordo di un determinato oggetto con:
document.getElementById('ID_OGGETTO').style.border Color = 'red';

[Marco1980]

Si ma non volgio modificare il bordo grigio ma creare un'altro bordo intorno..

[Mich_]

Metti il tuo div in un div esterno un pelo piu` grande, e cambi sfondo o bordo di quest'ultimo.

[Marco1980]

Giusto. Il controllo del defualt sarà automatico? Nel senso che se all'inizio c'è scritto "Marco", lo cancello e riscrivo "Marco" che colore verrà applicato? Ipotizzo di usare onChnage come controllo giusto?

[Mich_]

Il semplice cambio del contenuto non modifica le caratteristiche del CSS. Per quelle ci vuole un apposito comando JS.

Puoi usare onchange, che effettua il cambiamento alla perdita del focus da parte del campo (dopo che e` stato modificato). E` la soluzione piu` semplice.
Nel tuo caso potrebbe anche servire onfocus, oppure onkeyup. Tieni presente che onkeyup e` un po' piu` complesso da gestire, per cui ti consiglio di provarlo dopo che onchange e/o onfocus sono gia` stati testati e funzionano.

[Marco1980]

Ciao!
Sono tornato su questo punto dopo un po' di NON programmazione..

Il codice qua sotto per adesso non usa i DIV ma colora semplicemente il bordo della input. Naturalmente adesso cambia colore solo se viene cancellato il contenuto della input..
Adesso mi servirebbe cambiare colore se il valore della input (Test) viene modificato (editato e cancellato). Se torna ad essere Test deve tornare il colore base..

<script language="JavaScript" type="text/javascript">
<!--
function mycheck(obj) {
    if (obj.value=='') {
        if ((document.all)||(document.getElementById)) {
            obj.style.borderColor = '#FF0000';
        	//obj.style.backgroundColor = '#333333';
        }
    } else {
        if ((document.all)||(document.getElementById)) {
            //obj.style.backgroundColor = '#FFFFFF';
            obj.style.borderColor = '#000000';
        }
    }
}
//-->
</script>

<form action="../">
<input size="30" 
    onclick="mycheck(this)"
    onfocus="mycheck(this)"
    onblur="mycheck(this)"
    onchange="mycheck(this)"
   	onkeyup="mycheck(this)"  
    onkeydown="mycheck(this)"   
    value="Test..">
</form>

Grazie!

[Marco1980]

Risolto quel problema..
Adesso cerco di andare avanti con l'utilizzo del DIV.