Yo utilizo esta función para ocultar y mostrar un elemento, en este caso es un contador. Utilizo los eventos onblur()
y onfocus()
que ofrece el elemento <input>
(Aplica también para un textarea, como es en este caso). Pruébalo y adaptalo a tu proyecto, puede que te sirva sino me comentas, saludos!
function ocultarContador(){
document.getElementById('ocultar').style.display = "none";
}
function mostrarContador(){
document.getElementById('ocultar').style.display = "inline-block";
}
/*No tomes mucho en cuenta este css*/
.ocultar{
display: none;
}
.ocultar input{
border-style: solid;
border-color: black;
border-width: 2px;
border-radius: 5px;
width: 12%;
height: 5mm;
color: black;
padding-left: 1mm;
}
.form-group{
font-family: 'Segoe UI' !important;
}
<div class="form-group">
<label class="label_contact">¿En qué podemos ayudarte?</label>
<br><br>
<textarea name="comment" id="com" required="required" onfocus="mostrarContador(this)" onblur="ocultarContador(this)" title="Completa este campo"></textarea>
<div id="ocultar" class="ocultar">
<label style="color: black; font-size: 14px;">Caracteres Restantes: </label>
<input disabled="disabled" maxlength="4" value="1500" id="contador">
</div>
</div>
El tema son los eventos onblur()
y onfocus()
, que trabajan de la manera como lo planteas. Al hacer clic en cualquier otro lado de la pagina quita un valor a un elemento, en el ejemplo que te plantee oculta y muestra un elemento. En tu caso tendrías que hacer lo contrario para que cambie el colorestilo que quieras modificar cuando haces clic en otro lado del sitio, respectivamente.