Contacaratteri colorato

Shyson · 2012-08-19T17:09:40+0200

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 · 2012-08-19T17:20:16+0200

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 · 2012-08-19T17:26:36+0200

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 · 2012-08-19T17:33:53+0200

manca la chiusura

HTML:

</textarea>

Shyson · 2012-08-19T17:45:17+0200

criric ha scritto:
manca la chiusura

HTML:

</textarea>

C'è quella chiusura. poi ho notato che hai aggiunto un end, nel codice originale non c'era. <500, true, 'end', '');...

criric · 2012-08-19T17:54:37+0200

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 · 2012-08-19T18:09:16+0200

criric ha scritto:
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 · 2012-08-19T18:14:03+0200

lo script che ti ho postato all'inizio è completo e funziona
riguardalo meglio

Shyson · 2012-08-19T19:01:25+0200

criric ha scritto:
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 · 2012-08-19T19:17:12+0200

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 · 2012-08-19T23:13:06+0200

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>

Shyson · 2012-08-20T16:05:37+0200

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 · 2012-08-20T18:53:39+0200

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 · 2012-08-20T20:53:24+0200

Bene, in un qualche modo ci son riuscito.

:beer:

Shyson · 2012-08-21T00:30:24+0200

criric ha scritto:
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 · 2012-08-21T10:13:07+0200

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;

Shyson · 2012-08-22T16:29:20+0200

Criric che fine hai fatto? Per il textarea hai una soluzione?

criric · 2012-08-22T21:22:46+0200

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 · 2012-08-22T22:30:23+0200

criric ha scritto:
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.

Shyson · 2012-08-23T20:35:19+0200

Non sono riuscito a trovare la soluzione

Contacaratteri colorato

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Utente Attivo

Super Moderatore

Utente Attivo

Utente Attivo

Utente Attivo

Utente Attivo

Super Moderatore

Utente Attivo

Utente Attivo

Discussioni simili