Incollare i numeri multipli su più campi di input

Ho un form sul mio sito utilizzando 6 campi di input. Il visitatore del sito semplicemente entra in un 6 cifre del codice in questi 6 scatole. Il fatto è che si otterrà il codice a 6 numeri e sarebbe l’ideale per permettere loro di copiare semplicemente il codice a 6 numeri li mandiamo in questi campi di input da porre semplicemente incollando il primo campo di input e di avere il restante 5 cifre andare nel restante 5 campi di input. Sarebbe solo rendere molto più facile che dover inserire manualmente ogni cifra in ogni campo di input.

Ecco il codice che stai utilizzando attualmente, ma può essere facilmente modificato per realizzare quanto sopra descritto:

<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]">

Ho visto un post simile a questo qui: Incolla di serialnumber su più campi di testo

Ma non è la soluzione che sto cercando. Idealmente, questo potrebbe essere tirato fuori utilizzando jQuery o semplice JavaScript.

InformationsquelleAutor flinx777 | 2012-08-03

 

4 Replies
  1. 6

    Modifica

    Non mi piace il timer soluzione che ho usato nel paste evento e la complessità di utilizzare solo il input o paste evento.

    Dopo aver guardato per un po ‘ ho aggiunto una soluzione che utilizza un ibrido tra i 2.
    Il codice sembra di fare tutto ciò che è necessario ora.

    Script:

    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])
        });
    };​

    Vedere DEMO

  2. 2

    Questo non dovrebbe essere troppo difficile … aggiungere un gestore per il incolla evento il primo ingresso, e poi il processo secondo il requisito.

    Modifica

    In realtà questo è molto più complicato di quello che pensavo, perché sembra che ci sia alcun modo per ottenere quello che il testo è stato incollato. Si potrebbe avere a che tipo di hack di questa funzionalità, utilizzando qualcosa di simile a questo (punto di lavoro)… (vedi il 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 che avrei detto: io sono abbastanza un js noob, in modo non del tutto sicuri di come tirare fuori. hai qualche esempio?
    • scusate, questa era una sporca bugia… questo non è abbastanza semplice. Si prega di vedere il mio aggiornamento.
    • Non è possibile incollare più di una volta. Incollare 123456, di 345678 per esempio. Una volta che il valore è nella scatola la pasta viene ignorato.
    • Più paste lavorato bene qui.
    • Con la nuova appunti, selezionare il valore 1 nella prima casella e premere Ctrl+V. [email protected] ha funzionato qui.
    • Selezionando il valore e quindi incollare la sostituzione e quindi funziona ovviamente, sto parlando di quando si posiziona il punto di inserimento nella casella di dietro o di fronte al valore corrente (non selezionare o eliminare) e incolla 🙂
    • Per quanto riguarda il tuo ultimo post, si potrebbe aggiungere un $(this).select() all’interno di un focus gestore di eventi per il primo ingresso.

  3. 0

    Si sta andando ad avere per diritto di codice personalizzato. Potrebbe essere necessario rimuovere la proprietà maxlength e utilizzare javascript per far rispettare il limite di un numero per ogni ingresso.

    Come dbasemane suggerisce, è possibile ascoltare per una pasta evento. È possibile ascoltare keyup eventi per consentire all’utente di digitare i numeri senza dover passare per l’ingresso successivo.

    Ecco una possibile soluzione:

    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);

    Ho questo codice impostato su jsfiddle, così si può dare un’occhiata a come funziona: http://jsfiddle.net/hallettj/Kcyna/

  4. 0

    Qui è un esempio di un plugin per jquery che fa la stessa cosa come l’originale risposta solo generalizzato.

    Sono andato a grandi lunghezze per modificare l’originale risposta ( http://jsfiddle.net/D7jVR/ ) per un plugin per jquery e il codice sorgente è qui: https://github.com/relipse/jquery-pastehopacross/blob/master/jquery.pastehopacross.js

    Un esempio su jsfiddle è qui:
    http://jsfiddle.net/D7jVR/111/

    Fonte del 4-Apr-2013 è di seguito:

    /**
     * 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);

Lascia un commento