1

He encontrado este magnífico ejemplo de Banshi L. Dangi de como añadir un contador de caracteres a una textarea con emoticonos de emojioneArea: https://stackoverflow.com/a/42703854/2692665 Pero, ¿alguien sabe cómo hacer que al llegar al número máximo de caracteres no sea posible escribir más? Gracias por la ayuda. Saludos.

Código de la pregunta:

/*emojioneArea */
   $(document).ready(function() {
         $("#message").emojioneArea({
                       pickerPosition: "bottom",
                       tonesStyle: "bullet",
                       events: {
                         keyup: function (editor, event) {
                           console.log('event:keyup');
                           countChar(this);
                        }
                      }
               });
    }); 

   /*Character Counter */
        function countChar(val) {
            var len = val.getText().length;
            if (len >= 140) {
                  val.value = val.content.substring(0, 140);
                  $('#chars').text(0);
            } else {
                 $('#chars').text(140 - len);
            }
        }
8
  • Bienvenido, deberías añadir el código a tu pregunta ya que los enlaces pueden desaparecer, ¿qué ocurre si Blunick borra su pregunta? entonces no podríamos acceder al código mencionado.
    – track3r
    Commented el 30 abr. 2018 a las 11:19
  • 2
    En el keyup dónde se llama a countChar(this); deberías cambiarlo por algo así como c = countChar(this); y cambiar la función para que devuelva el número de caracteres, entonces si c = 0 cancela el keyup con event.preventDefault() o similar.
    – track3r
    Commented el 30 abr. 2018 a las 11:22
  • Eso lo he intentado ya pero por alguna razón que desconozco el event.preventDefault() no funciona dentro del keyup. Gracias de todos modos por la respuesta. Commented el 30 abr. 2018 a las 11:48
  • Ya he añadido el código, lamento el error, track3r. Como habréis adivinado no suelo publicar mucho por aquí, de ahí mi torpeza. Gracias por la advertencia. Un saludo. Commented el 30 abr. 2018 a las 11:54
  • Si no te importa, ¿podrías añadir tu código modificado con el intento del event.preventDefault()? prueba a realizar event = "", ya que mirando la documentación, parece que event no es el evento, sino la key pulsada, pero no estoy muy seguro.
    – track3r
    Commented el 30 abr. 2018 a las 12:05

1 respuesta 1

1

Bien pues me auto-contesto. El problema está en el evento keyup. Como su nombre indica se ejecuta cuando la tecla está arriba, es decir, cuando ya se ha pulsado y se suelta. Esto implica que el caracter ya se ha pintado en la caja de texto y por eso el event.preventDefault() no sirve de nada. La solución está en usar el evento keyup para el contador, puesto que así cuenta caracteres que ya están pintados y el evento keypress para ejecutar en el el event.preventDefault() si se ha sobrepasado el número de caracteres permitido. El resultado sería algo como esto:

$(document).ready(function() {
var maxNumCharacters = 140;
     $("#message").emojioneArea({
                   pickerPosition: "bottom",
                   tonesStyle: "bullet",
                   events: {
                     keyup: function (editor, event) {
                       console.log('event:keyup');
                       countChar(this.getText());
                    },
                    keypress: function (editor, event){
                    if (this.getText().length>=maxNumCharacters){
                        event.preventDefault();
                    }
                    }
                  }
           });
           countChar( $('#message').val());
}); 

    function countChar(val) {
        var len = val.length;
        if (len >= 140) {
              val.value = val.content.substring(0, 140);
              $('#chars').text(0);
        } else {
             $('#chars').text(140 - len);
        }
    }

Mi error estaba por lo tanto en obsesionarme en el evento equivocado. Os doy las gracias de todos modos, por haberme puesto en el camino correcto. Un saludo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.