Skip to main content
se añadieron 23 caracteres en el cuerpo
Origen Enlace
M4uriXD
  • 682
  • 1
  • 11
  • 36

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">
      &nbsp;<label style="color: black; font-size: 14px;">Caracteres Restantes:&nbsp;</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.

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">
      &nbsp;<label style="color: black; font-size: 14px;">Caracteres Restantes:&nbsp;</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 color cuando haces clic en otro lado del sitio, respectivamente.

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">
      &nbsp;<label style="color: black; font-size: 14px;">Caracteres Restantes:&nbsp;</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 estilo que quieras modificar cuando haces clic en otro lado del sitio, respectivamente.

se añadieron 361 caracteres en el cuerpo
Origen Enlace
M4uriXD
  • 682
  • 1
  • 11
  • 36

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">
      &nbsp;<label style="color: black; font-size: 14px;">Caracteres Restantes:&nbsp;</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 color cuando haces clic en otro lado del sitio, respectivamente.

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">
      &nbsp;<label style="color: black; font-size: 14px;">Caracteres Restantes:&nbsp;</label>
    <input disabled="disabled" maxlength="4" value="1500" id="contador">
     </div>
</div>  

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">
      &nbsp;<label style="color: black; font-size: 14px;">Caracteres Restantes:&nbsp;</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 color cuando haces clic en otro lado del sitio, respectivamente.

Origen Enlace
M4uriXD
  • 682
  • 1
  • 11
  • 36

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">
      &nbsp;<label style="color: black; font-size: 14px;">Caracteres Restantes:&nbsp;</label>
    <input disabled="disabled" maxlength="4" value="1500" id="contador">
     </div>
</div>