Question

Con este código consigo que no se puedan introducir más de 2 caracteres en el input, pero si yo quiero ademas que solo ciertos caracteres se puedan picar ¿Como lo hago?

$(document).ready(function() {
        $("body").on("click", "form", function( event ) {          
            var caracteres = 1;
            var elementopresionado = ".camponumerico";

            function limitarcaracteres() {
                                if($(this).val().length > caracteres) {                 
                        $(this).val($(this).val().substr(0, caracteres));
                }
            }           
            $(elementopresionado).keydown(limitarcaracteres);
        });

Comments

Te pego el codigo tal y como lo tengo ahora mismo con keypress, yo ya me conformo con el funcionamiento actual, seguramente tendrás razón pero desconozco porque, también es verdad que solo estoy probando con Firefox

function limitarcaracteres(event) {         
                var MAX_CARACTERES = 2;
                var elementopresionado = ".camponumerico";
                var keyCode = event.which || event.keyCode;             
                if (keyCode == 8 || keyCode == 46 || keyCode == 37 || keyCode == 39) {
                    return true;
                }
                var newVal = $(elementopresionado).val() + String.fromCharCode(keyCode);

                if(keyCode < 48 || keyCode > 57) 
                {
                    return false;
                }           
                else if(newVal.length > MAX_CARACTERES) {                          
                    return false;
                }
                else if(parseInt(newVal) < 1 || parseInt(newVal)  > 20) {     
                    $("#submit").prop( "disabled", true );
                    return false;
                }                   
                else {
                    $("#submit").prop( "disabled", false );
                }
            }
            $("body").on("keypress", ".camponumerico", function( event ) {
                return limitarcaracteres(event);        
            });

---

Hola @bichomen @magarzon,

Me alegro que hayas resuelto tu problema.

Te dejo aquí una solución al mismo, que creo que hace lo que buscas, de una manera más sencilla y fácil de entender.

Link al ejemplo

Espero tu comentario a ver si lo que hace es lo que esperabas.

Un saludo.

---

Hola @jrgm0005, tu codigo esta bien y funcionan las teclas de control, yo prefiero tener todo agrupado en una función ya que el archivo jquery tiene muchas más funciones que esta y así queda todo más ordenado por funciones, solo un detalle, tu código no acepta el 20 y en cambio acepta el 0.

Saludos

---

Ah sí, jaja lo hice así rápido para mostrar, eso sólo es cambiar el if de la función de si es menor que 20, pero era así para mostrarte.

Mi consejo es que separes lo máximo posible, porque aunque sean más funciones, siempre vas a poder reutilizar al máximo y eso es fundamental en proyectos grandes.

Me alegro que ya tengas solucionada tu duda.

Un saludo.

---

Te he actualizado el código, por si quieres echarle un vistazo, para que veas qué tal se queda tal cual como quieres.

¿Qué te parece el código? ¿Es fácil de entender y de leer?

Un saludo.

Answer 1

Modifica tu función limitarCaracteres así:

function limitarcaracteres(event) {
  if($(this).val().length > caracteres) {                
      return false; //No hace falta hacer un substr, con que devuelvas false ya no te añade el último caracter introducido
  }   

   var keyCode = event.which || event.keyCode;
   //En keyCode tienes el código ASCII de la tecla presionada, por ejemplo para permitir sólo números:
   return keyCode >= 48 && keyCode <= 57;
}  

Por cierto, me acabo de dar cuenta. ¿Por qué estableces el keydown cada vez que haces click en el form? De esta forma, vas a añadir N controladores, uno por cada vez que el usuario haga click en el formulario, que luego se van a ejecutar N veces cada vez que el usuario entre algún carácter en el campo (y además si el usuario accede al input pulsando tabulador, en lugar de hacer click en el form, no te va a funcionar). Deberías establecerlo fuera del formulario, aplicado al elemento input concreto.

Answer 2

Hola @bichomen,

Esto es un MUST para crecer como developer, DIVIDE Y VENCERAS, tienes que aprender a estudiar tu situación, estudiarla y ver lo que quieres obtener.

Haz las cosas por pasos, y que cada parte de código se encargue de una sola cosa.

Aquí te voy a dejar un ejemplo de como sería una solución aproximada, no sé si el código será el correcto ni será lo que estás buscando exactamente, pero échale un vistazo a cómo he ido solucionando y el proceso seguido, y así tú mismo pensaras la solución más limpia y clara posible a tu problema.

// Función que comprueba si el valor introducido es númerico
function entradaEsNumero(event){
var keyCode = event.which || event.keyCode;
   return keyCode >= 48 && keyCode <= 57;
}

// Función que comprueba si es menor que 20, que creo que no necesitas un acumulado
function valorMenorQue20(campoNumerico) {
return parseInt(campoNumerico.val()) < 20;
            }

// Una vez que tenemos nuestras funciones para lo que queremos, añadimos el evento, donde validamos, primero que sea númerico lo introducido, y después que su valor no es superior a 20.
$(".camponumerico").onkeydown = function(){
return entradaEsNumero(event) && valorMenorQue20($(".camponumerico"));
}

Si tienes más dudas no dudes en preguntar.

Un saludo.

Juan Ramón González Morales. UX Designer

Answer 3

Hola @bichomen ,

En ese código, las funciones tienes que declararlas fuera del evento, y en el evento llamarlas.Aún así échale un vistazo a mi código, que creo que te soluciona tu problema, o te deja en una aproximación bastante cercana.