Contacaratteri colorato

Shyson

Utente Attivo
19 Ago 2012
1.179
1
38
Devo fare in modo che quando arriva a dieci caratteri rimanenti, si colora di rosso

HTML:
<script type="text/javascript">  
charCount = 1; maxCharCount = 2000;  
function displayRemLength(fieldName) {  
remField = document.getElementById(fieldName);  
remField.innerHTML = (maxCharCount - charCount > 0) ?  
maxCharCount - charCount : 0;  
}  
function evalEntryLength(curField, maxLimit, discardXtra, errClass, normalClass { 
maxCharCount = maxLimit;  
var fieldLength = getCharCount(curField);  
if (fieldLength > maxLimit) { if (errClass != "") {  
curField.className = errClass;  
} 
if (discardXtra) {  
showAllowedLength(curField, maxLimit);  
}  
}  
else if (normalClass != "") {  
curField.className = normalClass;  
}  
}  
function getCharCount(curField) {  
charCount = curField.value.length;  
return charCount;  
}  
function showAllowedLength(curField, maxLimit) {  
curField.value = curField.value.substr(0, maxLimit);  
window.status = curField.value;  
}  
</script> 

<span id="charCount">100</span> caratteri rimanenti 

<textarea name="messaggio" id="text-guest" cols="0" rows="0" onkeyup="evalEntryLength(this, 100, true, '', ''); displayRemLength('charCount');></textarea>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
basta aggiugere una classe css passarla alla fuznione e modificare la if di controllo
nel tuo codice mancavano una parentesi a chiusura della funzione evalEntryLength e un doppio apice a chiusura dell'evento onkeyup

Codice:
<script type="text/javascript">  
    charCount = 1; maxCharCount = 2000;  
    function displayRemLength(fieldName) {  
        remField = document.getElementById(fieldName);  
        remField.innerHTML = (maxCharCount - charCount > 0) ?  
            maxCharCount - charCount : 0;  
    }  
    function evalEntryLength(curField, maxLimit, discardXtra, errClass, normalClass) { 
        maxCharCount = maxLimit;  
        var fieldLength = getCharCount(curField);  
        if (fieldLength > maxLimit - 10) { if (errClass != "") {  
                curField.className = errClass;  
            } 
            if (discardXtra) {  
                showAllowedLength(curField, maxLimit);  
            }  
        }  
        else if (normalClass != "") {  
            curField.className = normalClass;  
        }  
    }  
    function getCharCount(curField) {  
        charCount = curField.value.length;  
        return charCount;  
    }  
    function showAllowedLength(curField, maxLimit) {  
        curField.value = curField.value.substr(0, maxLimit);  
        window.status = curField.value;  
    }  
</script> 
<style>
    .end{
        color:red;
    }
</style>
<span id="charCount">100</span> caratteri rimanenti 

<textarea name="messaggio" id="text-guest" cols="0" rows="0" onkeyup="evalEntryLength(this, 100, true, 'end', ''); displayRemLength('charCount');"></textarea>
 

Shyson

Utente Attivo
19 Ago 2012
1.179
1
38
Va bene così?

PHP:
	<textarea name="messaggio" id="txtScrivimi1" cols="0" rows="0" onkeyup="evalEntryLength(this, 500, true, '', ''); displayRemLength('charCount');" onblur="this.value=this.value.replace(/[\s]*/,'')"><?php echo($_SESSION['messaggio'])?></textarea>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
manca la chiusura
HTML:
</textarea>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Si è il nome della classe che ho creato e che da il colore rosso al testo
HTML:
<style>
    .end{
        color:red;
    }
</style>
poi viene passata alla funzione javascript che la assegna al testo quando mancano 10 caratteri
Codice:
 if (fieldLength > maxLimit - 10) { if (errClass != "") {  
                curField.className = errClass;  
            }
 

Shyson

Utente Attivo
19 Ago 2012
1.179
1
38
Si è il nome della classe che ho creato e che da il colore rosso al testo
HTML:
<style>
    .end{
        color:red;
    }
</style>
poi viene passata alla funzione javascript che la assegna al testo quando mancano 10 caratteri
Codice:
 if (fieldLength > maxLimit - 10) { if (errClass != "") {  
                curField.className = errClass;  
            }

Non si colora, ma qui non vedo la classe"end" che hai creato

if (fieldLength > maxLimit - 10) { if (errClass != "") {
curField.className = errClass;
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
lo script che ti ho postato all'inizio è completo e funziona
riguardalo meglio
 

Shyson

Utente Attivo
19 Ago 2012
1.179
1
38
lo script che ti ho postato all'inizio è completo e funziona
riguardalo meglio

Ho fatto copia-incolla del tuo ma non va, poi, una cosa: io non intendo colorare il testo nel textarea, ma la scritta esterna, questa:

PHP:
<span class="charCountRim">Rimanenti&nbsp;</span><span id="charCount">15</span>
<br />
<span class="charCountRim">&nbsp;caratteri</span>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
io non intendo colorare il testo nel textarea
non avevo capito
allora devi racchiudere tutto quello che vuoi colorare in un altro elemento con id univoco ( io gli ho assegnato 'cambiacolore') e cambiare la funzione javascript cosi
Codice:
if (fieldLength > maxLimit - 10) { if (errClass != "") {  
                document.getElementById('cambiacolore').className = errClass;  
            }
Ti riposto lo script iniziale modificato Testato su Chrome Firefox e Explorer
HTML:
<script type="text/javascript">  
    charCount = 1; maxCharCount = 2000;  
    function displayRemLength(fieldName) {  
        remField = document.getElementById(fieldName);  
        remField.innerHTML = (maxCharCount - charCount > 0) ?  
            maxCharCount - charCount : 0;  
    }  
    function evalEntryLength(curField, maxLimit, discardXtra, errClass, normalClass) { 
        maxCharCount = maxLimit;  
        var fieldLength = getCharCount(curField);  
        if (fieldLength > maxLimit - 10) { if (errClass != "") {  
                document.getElementById('cambiacolore').className = errClass;  
            } 
            if (discardXtra) {  
                showAllowedLength(curField, maxLimit);  
            }  
        }  
        else if (normalClass != "") {  
            curField.className = normalClass;  
        }  
    }  
    function getCharCount(curField) {  
        charCount = curField.value.length;  
        return charCount;  
    }  
    function showAllowedLength(curField, maxLimit) {  
        curField.value = curField.value.substr(0, maxLimit);  
        window.status = curField.value;  
    }  
</script> 
<style>
    .end{
        color:red;
    }
</style>
<span id="cambiacolore"><span id="charCount">100</span> caratteri rimanenti </span>

<textarea name="messaggio" id="text-guest" cols="0" rows="0" onkeyup="evalEntryLength(this, 100, true, 'end', ''); displayRemLength('charCount');"></textarea>
 

Shyson

Utente Attivo
19 Ago 2012
1.179
1
38
Ok, funziona, a 10 caratteri si accende di rosso tutto la dicitura col numero.

Ho notato però che non posso personalizzare i colori dei 2 css charCountRim e charCount altrimenti a 10 non diventa rosso

HTML:
<span id="cambiacolore"><span class="charCountRim">Rimanenti&nbsp;<span id="charCount">15</span>
    <br />
    caratteri</span></span>
 
Ultima modifica:

Shyson

Utente Attivo
19 Ago 2012
1.179
1
38
Diciamo che ho quasi risolto del tutto, c'è ancora il numero che non diventa rosso, ti posto i codci se puoi vedere altrimenti lo tengo così, penso sia una cosa di css:

PHP:
#contSXScrivimi1 { 
    float: left;
    width: 103px;
    height: 100px;
    font-family: arial; color: #666666;
    font-size: 1.35em;
    padding-top: 15px;
    text-align: center;
    text-shadow: 0px 1px 0px white;
    border: 0px solid yellow;
}

.testoMessScrivimi1 {
    font-family: arial; color: #000080;
    font-size: 1.2em;
    font-weight: 600;    /*Grossetto*/
    text-shadow: 0px 1px 0px white;
} 

.numero { 
    font-family: arial; color: #004080;
    font-size: 1.2em;
    text-shadow: 0px 1px 0px white;
}

.UltimiCaratteri {
    color: red;
}


PHP:
<div id="contSXScrivimi1">
		<span class="testoMessScrivimi1">Testo</span><span class="asterisco1">&nbsp;*</span>
		<br />
<span id="cambiacolore">Rimanenti&nbsp;<span class="numero"><span id="charCount">15</span></span>
    <br />
    caratteri</span>
    </div>

<textarea name="messaggio" id="txtScrivimi1" cols="0" rows="0" onkeyup="evalEntryLength(this, 15, true, 'UltimiCaratteri',' '); displayRemLength('charCount');" onblur="this.value=this.value.replace(/[\s]*/,'')"><?php echo($_SESSION['messaggio'])?></textarea>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Potresti fare cosi
togli lo span cambiacolore e modifichi questo nel javascript
Codice:
if (fieldLength > maxLimit - 10) { if (errClass != "") {  
                document.getElementById('cambiacolore').className = errClass;  
            }
aggiungendo tutti gli elementi che vuoi diventino rossi
Codice:
if (fieldLength > maxLimit - 10) { if (errClass != "") {  
                document.getElementById('charCount').className = errClass;  
                document.getElementById('contSXScrivimi1').className = errClass;  
                // e avanti fino  ache si colorano tutti
            }
non dovra rimanere niente fuori da un elemento pero
 

Shyson

Utente Attivo
19 Ago 2012
1.179
1
38
Potresti fare cosi
togli lo span cambiacolore e modifichi questo nel javascript
Codice:
if (fieldLength > maxLimit - 10) { if (errClass != "") {  
                document.getElementById('cambiacolore').className = errClass;  
            }
aggiungendo tutti gli elementi che vuoi diventino rossi
Codice:
if (fieldLength > maxLimit - 10) { if (errClass != "") {  
                document.getElementById('charCount').className = errClass;  
                document.getElementById('contSXScrivimi1').className = errClass;  
                // e avanti fino  ache si colorano tutti
            }
non dovra rimanere niente fuori da un elemento pero

Ancora un ultimo problema, che tra l'altro me lo da solo col form online, con MAMP outline funziona bene, eppure i codici sono identici.

Quando arrivo alle ultime 20 parole si accendono, però essendo in fondo al textarea iniziano a saltellare. Ho provato a impostare meno parole e non saltellano se non arrivano in fondo al textarea.

Prova a verificare, clicca su Contatti http://www.bellezzalive.altervista.org/#
 

Shyson

Utente Attivo
19 Ago 2012
1.179
1
38
Ho notato che lo fa solo con FF ma solo quando arriva ai caratteri finali rossi; safari, opera e chrome vanno bene, il css è overflow: auto;
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ho notato il difetto, ma non sono riuscito ancora a provare una soluzione
capita solo premendo la barra spaziatrice
Se riesci prima di me posta
 

Shyson

Utente Attivo
19 Ago 2012
1.179
1
38
Ho notato il difetto, ma non sono riuscito ancora a provare una soluzione
capita solo premendo la barra spaziatrice
Se riesci prima di me posta

Ho provato a togliere -10 e non fa più difetto, però non diventa pù nemmeno rosso.

Poi volevo sapere, a che servono questi 2 numeri?

charCount = 0;
maxCharCount = 2000;


ho provato a modificarli e addirittura a togliere i codici ma funziona tutto uguale.
 
Discussioni simili
Autore Titolo Forum Risposte Data
D Testo colorato in base a giorno settimana PHP 12
P [HTML] Sfondo colorato di un div contenitore di altri due div HTML e CSS 9
utente testo scorrevole con sfondo colorato con css esterno HTML e CSS 6
R Come centrare il testo in un paragrafo con sfondo colorato? HTML e CSS 2
G [VENDO] Annuncio Testuale Colorato A Rotazione - advhits.com (2500 Unici/Giorno) Vendere e Acquistare pubblicita' online 0
G [VENDO] Popunder Colorato Animato A Rotazione - advhits.com (3000 Unici/Giorno) Vendere e Acquistare pubblicita' online 0
G [VENDO] Annuncio Testuale Colorato Fisso - advhits.com (2500 Unici/Giorno) Vendere e Acquistare pubblicita' online 0
G [VENDO] Popunder Colorato Animato A Rotazione - advhits.com (2500 Unici/Giorno) Vendere e Acquistare pubblicita' online 0
G [VENDO] Annuncio Testuale Colorato A Rotazione - advhits.com (2500 Unici/Giorno) Vendere e Acquistare pubblicita' online 0
G [VENDO] Popunder Colorato Animato A Rotazione - advhits.com (2500 Unici/Giorno) Vendere e Acquistare pubblicita' online 0
G [VENDO] Popunder Colorato Animato A Rotazione - advhits.com (2500 Unici/Giorno) Vendere e Acquistare pubblicita' online 0
G [VENDO] Annuncio Testuale Colorato A Rotazione - advhits.com (2500 Unici/Giorno) Vendere e Acquistare pubblicita' online 0
G [VENDO] Popunder Colorato Animato A Rotazione - advhits.com (2500 Unici/Giorno) Vendere e Acquistare pubblicita' online 0
G [VENDO] Annuncio Testuale Colorato A Rotazione - advhits.com (2.500 Unici/Giorno) Vendere e Acquistare pubblicita' online 0
G [VENDO] Annuncio Testuale Colorato A Rotazione - advhits.com (3000 Unici/Giorno) Vendere e Acquistare pubblicita' online 0
G [VENDO] Popunder Colorato Animato A Rotazione - advhits.com (3000 Unici/Giorno) Vendere e Acquistare pubblicita' online 0
R lettura file rtf con testo colorato e stampa a video PHP 1
X-Zeus Link script colorato Javascript 1
D testo colorato Javascript 2

Discussioni simili