Pegar varios números a través de varios campos de entrada

Tengo un formulario en mi sitio con 6 campos de entrada. El visitante del sitio simplemente tiene que ingresar un código de 6 dígitos código en estos 6 cajas. La cosa es que van a llegar a los 6 dígitos de código y sería ideal que les permita simplemente copia el código de 6 dígitos código que le hemos enviado en estos campos de entrada poniendo simplemente pegar en el primer campo de entrada y tener el restante 5 dígitos entrar en el resto de los 5 campos de entrada. Se acaba de hacer que sea mucho más fácil que tener que introducir manualmente cada uno de los dígitos en cada campo de entrada.

Este es el código que estamos usando actualmente, pero puede ser fácilmente cambiado para lograr lo anteriormente descrito:

<input type="text" maxlength="1" class="def-txt-input" name="chars[1]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[2]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[3]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[4]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[5]">
<input type="text" maxlength="1" class="def-txt-input" name="chars[6]">

Vi un mensaje similar a este: El encolamiento de serialnumber a través de varios campos de texto

Pero no tiene la solución que estoy buscando. Idealmente, esto podría ser arrancados con jQuery o el simple JavaScript.

InformationsquelleAutor flinx777 | 2012-08-03

4 Kommentare

  1. 6

    Editar

    No me gusta el temporizador de solución que se usa en la paste caso y la complejidad de usar el input o paste evento.

    Después de mirar un rato he añadido una solución que utiliza un híbrido entre el 2.
    El código parece hacer todo lo que se requiere ahora.

    La Secuencia De Comandos:

    var $inputs = $(".def-txt-input");
    var intRegex = /^\d+$/;
    
    //Prevents user from manually entering non-digits.
    $inputs.on("input.fromManual", function(){
        if(!intRegex.test($(this).val())){
            $(this).val("");
        }
    });
    
    
    //Prevents pasting non-digits and if value is 6 characters long will parse each character into an individual box.
    $inputs.on("paste", function() {
        var $this = $(this);
        var originalValue = $this.val();
    
        $this.val("");
    
        $this.one("input.fromPaste", function(){
            $currentInputBox = $(this);
    
            var pastedValue = $currentInputBox.val();
    
            if (pastedValue.length == 6 && intRegex.test(pastedValue)) {
                pasteValues(pastedValue);
            }
            else {
                $this.val(originalValue);
            }
    
            $inputs.attr("maxlength", 1);
        });
    
        $inputs.attr("maxlength", 6);
    });
    
    
    //Parses the individual digits into the individual boxes.
    function pasteValues(element) {
        var values = element.split("");
    
        $(values).each(function(index) {
            var $inputBox = $('.def-txt-input[name="chars[' + (index + 1) + ']"]');
            $inputBox.val(values[index])
        });
    };​

    Ver DEMO

  2. 2

    Esto no debería ser demasiado difícil … agregar un controlador para el pegar evento en la primera de entrada y, a continuación, el proceso por el requisito.

    Editar

    Realidad esto es mucho más complicado de lo que pensaba, porque parece que no hay manera de conseguir lo que el texto se pega. Usted podría tener que tipo de hack esta funcionalidad, el uso de algo como esto (semi-trabajo)… (ver el JSFiddle).

    $(document).on("input", "input[name^=chars]", function(e) {
        //get the text entered
        var text = $(this).val();
    
        //if 6 characters were entered, place one in each of the input textboxes
        if (text.length == 6) {
            for (i=1 ; i<=text.length ; i++) {
                $("input[name^=chars]").eq(i-1).val(text[i-1]);
            }    
        }
        //otherwise, make sure a maximum of 1 character can be entered
        else if (text.length > 1) {
            $(this).val(text[0]);
        }
    });
    • Ah, una cosa que me debía haber mencionado: soy bastante js noob, por lo que no del todo seguro de cómo lograr eso. tienes algún ejemplo?
    • lo siento, eso fue una sucia mentira… esto no es bastante sencillo. Por favor ver mis actualizaciones.
    • Usted no puede pegar más de una vez. Pegar 123456, que 345678 por ejemplo. Una vez que un valor está en la caja de la pasta es ignorado.
    • Con el nuevo portapapeles, seleccione el valor de 1 en el primer cuadro y pulse Ctrl+V. [email protected] trabajado aquí.
    • Seleccionando el valor y, a continuación, pegar va a reemplazar y, a continuación, funciona fuera de curso, estoy hablando de cuando se coloca el cursor en el cuadro de detrás o en frente de el valor de la corriente (no seleccionar o eliminar) y pegar 🙂
    • Respecto a tu último post, se podría añadir una $(this).select() dentro de un focus controlador de eventos para la primera entrada.

  3. 1

    Aquí es un ejemplo de un plugin de jquery que hace lo mismo que la original respuesta sólo se generalizado.

    Fui a grandes longitudes para modificar la respuesta original ( http://jsfiddle.net/D7jVR/ ) un plugin de jquery y el código fuente está aquí: https://github.com/relipse/jquery-pastehopacross/blob/master/jquery.pastehopacross.js

    Un ejemplo de esto en jsfiddle está aquí:
    http://jsfiddle.net/D7jVR/111/

    De la fuente como de 4-Abr-2013 es el siguiente:

    /**
     * PasteHopAcross jquery plugin
     * Paste across multiple inputs plugin, 
     * inspired by http://jsfiddle.net/D7jVR/
     */
    (function ($) {
        jQuery.fn.pastehopacross = function(opts){ 
           if (!opts){ opts = {} }
            if (!opts.regexRemove){
                opts.regexRemove = false;   
            }
            if (!opts.inputs){
               opts.inputs = [];   
            }
            if (opts.inputs.length == 0){
                //return 
                return $(this);   
            }
    
            if (!opts.first_maxlength){
                opts.first_maxlength = $(this).attr('maxlength');
                if (!opts.first_maxlength){
                    return $(this);
                }
            }
    
           $(this).on('paste', function(){
    
               //remove maxlength attribute
               $(this).removeAttr('maxlength'); 
               $(this).one("input.fromPaste", function(){
                   var $firstBox = $(this);
    
                    var pastedValue = $(this).val();
                    if (opts.regexRemove){
                         pastedValue = pastedValue.replace(opts.regexRemove, "");
                    }
    
                    var str_pv = pastedValue;
                    $(opts.inputs).each(function(){
                        var pv = str_pv.split('');
                        var maxlength;
                        if ($firstBox.get(0) == this){
                           maxlength = opts.first_maxlength;   
                        }else{
                           maxlength = $(this).attr('maxlength'); 
                        }
                        if (maxlength == undefined){
                            //paste them all!
                            maxlength = pv.length;   
                        }
                        //clear the value
                        $(this).val('');
                        var nwval = '';           
                        for (var i = 0; i < maxlength; ++i){
                            if (typeof(pv[i]) != 'undefined'){
                               nwval += pv[i];
                            }
                        }
                        $(this).val(nwval);
                        //remove everything from earlier
                        str_pv = str_pv.substring(maxlength);
                    });
    
                    //restore maxlength attribute
                    $(this).attr('maxlength', opts.first_maxlength);
                });    
    
           });
    
           return $(this);
        }
    })(jQuery);
  4. 0

    Vas a tener derecho a algún código personalizado. Puede que tenga que quitar la propiedad maxlength y el uso de javascript para hacer cumplir el límite de un número por cada entrada.

    Como dbasemane sugiere, se puede detectar una pasta evento. Usted puede escuchar el evento keyup demasiado para permitir que el usuario escriba los números sin tener que cambiar a la siguiente entrada.

    He aquí una posible solución:

    function handleCharacter(event) {
        var $input = $(this),
            index = getIndex($input),
            digit = $input.val().slice(0,1),
            rest = $input.val().slice(1),
            $next;
    
        if (rest.length > 0) {
            $input.val(digit);  //trim input value to just one character
            $next = $('.def-txt-input[name="chars['+ (index + 1) +']"]');
    
            if ($next.length > 0) {
                $next.val(rest);  //push the rest of the value into the next input
                $next.focus();
                handleCharacter.call($next, event);  //run the same code on the next input
            }
        }
    }
    
    function handleBackspace(event) {
        var $input = $(this),
            index = getIndex($input),
            $prev;
    
        //if the user pressed backspace and the input is empty
        if (event.which === 8 && !$(this).val()) {
            $prev = $('.def-txt-input[name="chars['+ (index - 1) +']"]');
            $prev.focus();
        }
    }
    
    function getIndex($input) {
        return parseInt($input.attr('name').split(/[\[\]]/)[1], 10);
    }
    
    $('.def-txt-input')
        .on('keyup paste', handleCharacter)
        .on('keydown', handleBackspace);

    Tengo este código en jsfiddle, así que usted puede tomar un vistazo a cómo se ejecuta: http://jsfiddle.net/hallettj/Kcyna/

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea