Espaciar cada 4 números

Tengo un cuadro de entrada que está limitado a 16 Números. Lo que me gustaría hacer por estética sería colocar un hueco por cada 4 números.

P.EJ. Cuando una persona entra

1234567891234567

Debe tener un aspecto como este

1234 5678 9123 4567

¿Cómo sería esto posible en Key Up en JQuery?

preguntado el 12 de junio de 12 a las 16:06

Consideraría (y recomendaría) agregar 4 cuadros de texto separados y agregar código para saltar automáticamente al siguiente cuadro de texto cuando el cuadro de texto esté lleno. -

Maldita sea, esperaba hacerlo en una sola caja.

Recomendaría no hacerlo en keyup ya que puede ser molesto. Imagínese mientras escribe 12335 y se da cuenta de que cometió un error, instintivamente retrocede dos veces para corregir el 3, pero ahora hay un espacio extra. Mejor hacerlo cuando el campo pierde foco -

es irritantemente complicado cuando intentas editar algo en el medio.. -

@Matt, sí, pero luego se aplica lo contrario, ve un espacio, por lo que retrocede dos veces y, de repente, el espacio ya no está allí, por lo que elimina un carácter adicional. Además, hacerlo en el desenfoque lo ayuda si alguien copia/pega toda la entrada en el campo (otra razón por la que no soy un fanático de los campos múltiples, hace que copiar/pegar sea un dolor) -

7 Respuestas

Aquí hay otra solución:

$(function() {

    $('#my-input')
    .blur(function() {
        var value = $(this).val();
        value = value.match(/.{1,4}/g).join(" ");
        $(this).val(value);
    })
    .focus(function() {
        var value = $(this).val();
        value = value.replace(/\s/g, '');
        $(this).val(value);
    });

});

Puedes echarle un vistazo a ese trabajo. jsviolín.

Agregué un focus evento para que sea más fácil de usar. Para resumir:

  • en desenfoque (es decir, al salir de la entrada): dividir cada 4 caracteres;
  • en foco (es decir, al editar la entrada): elimine los espacios en blanco agregados anteriormente.

Respondido el 12 de junio de 12 a las 17:06

+1 Muy agradable. Sin embargo, podría anular el punto de la función, ya que me imagino que los caracteres se dividen para facilitar la lectura al ingresar, pero sigue siendo una muy buena solución. - Curtis

Podría usar value.match(/.{1,4}/g).join(" ") - Esailija

Podrías hacer uso del función de módulo:

$("input").keyup(function(){
        var $this = $(this);
        if ((($this.val().length+1) % 5)==0){
            $this.val($this.val() + " ");
        }
    });  

-- VER DEMOSTRACIÓN --

Sin embargo, tiene un poco de errores, pero podría ser un buen punto de partida para ti.

Como han mencionado otros usuarios, esto no sería bueno para la usabilidad, y sería mejor usar 4 cuadros de texto (si la longitud es siempre 16) y usar algo como esto:

$("input").keyup(function(){
        var $this = $(this);
        if ($this.val().length>=4){
         $this.next().focus();   
        }
    }); 

-- VER DEMOSTRACIÓN --

Una vez más, podría tener un poco de errores, solo estoy señalando diferentes métodos.

Respondido el 12 de junio de 12 a las 16:06

Es molesto cuando intentas editar algo... ya que movería automáticamente el carro al final del texto. :PAGS - Selvakumar Arumugam

@Matt Buen punto Matt. He mencionado los guiones un poco defectuosos. Realmente solo estoy demostrando el uso de la función de módulo. - Curtis

Pruebe la siguiente solución si considera tenerla en varios cuadros de texto.

$(function() {
    var charLimit = 4;
    $(".inputs").keydown(function(e) {

        var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145];

        if (e.which == 8 && this.value.length == 0) {
            $(this).prev('.inputs').focus();
        } else if ($.inArray(e.which, keys) >= 0) {
            return true;
        } else if (this.value.length >= charLimit) {
            $(this).next('.inputs').focus();
            return false;
        } else if (e.shiftKey || e.which <= 48 || e.which >= 58) {
            return false;
        }
    }).keyup (function () {
        if (this.value.length >= charLimit) {
            $(this).next('.inputs').focus();
            return false;
        }
    });
});

Tiene las siguientes características,

  1. Autotabs a la siguiente entrada
  2. solo numérico
  3. charLimit - para establecer una longitud diferente

DEMO: http://jsfiddle.net/skram/qygB2/20/

Respondido el 12 de junio de 12 a las 16:06

Usaría un keypress controlador aquí:

$("#someinput").on('keypress',function(){
  var currval = this.value.replace(/\s+/g,'');
  return (this.value += currval.length && currval.length%4 < 1 ? ' ' : '', true);
});

Respondido 08 ago 13, 10:08

Algo como esto

$('input').keyup(function(){
    var val = $(this).val();
    if(val.length >= 4){
        $(this).next().focus();
    }
});

EDITAR: Bueno, tu ejemplo no es tan bueno como este de arriba, así que agregué esto en su lugar.

Respondido el 12 de junio de 12 a las 16:06

Hecho con keyup

$('#textbox').on('keyup', function(e) {
    var val = this.value;
    if (e.which != 8 && e.which != 46) {  // handle delete and backspace
        if (val.replace(/\s/g, '').length % 4 == 0) {
            $(this).val(val + ' ');
        }
    } else {
        $(this).val(val);        
    }
})

DEMO

Respondido el 20 de junio de 20 a las 10:06

aquí hay otra solución que quizás desee considerar

OnBlur = function()
{
    var value = $('#txtName').val().replace(/\s/g, "");
    var numberOfSpaces = Math.ceil(value.length / 4)-1;
    while(numberOfSpaces >0)
    {
        value = value.substr(0,numberOfSpaces*4) + ' ' + value.substr(numberOfSpaces*4);
        numberOfSpaces--;
    }
}

Respondido el 12 de junio de 12 a las 17:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.