Spostamento di un focus quando il campo di testo di input raggiunge una lunghezza massima

Ho un modulo di numero di carta di credito. Il numero è diviso in quattro parti proprio come su una vera carta di credito.Spostamento di un focus quando il campo di testo di input raggiunge una lunghezza massima

Desidero aggiungere un gusto JavaScript al modulo in cui quando un utente digita quattro lettere in un campo, lo stato attivo passa automaticamente al tag successivo. Ma non nell'ultimo tag. In questo modo, un utente non deve digitare il tasto "tab" per spostare un focus.

Va bene aggiungere qualche classe, ID o nome extra nei tag.

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>MoveFocus</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
    $(function() { 
    // some code goes here. 
    }); 
    </script> 
</head> 


<body> 
    <form action="post.php" method="post" accept-charset="utf-8"> 
    <input type="text" value="" id="first" size="4" maxlength="4"/> - 
    <input type="text" value="" id="second" size="4" maxlength="4"/> - 
    <input type="text" value="" id="third" size="4" maxlength="4"/> - 
    <input type="text" value="" id="fourth" size="4" maxlength="4"/> 
    <p><input type="submit" value="Send Credit Card"></p> 
    </form> 
</body> 
</html>

fonte

2009-12-24 TK.

... naturalmente alcuni utenti ** ** sarà premere il tasto tab, e Miss campi fuori. Non dividere il campo, basta usare un singolo campo. Rende le cose molto più facili per gli utenti (ed è ciò che fa ogni altro sito web là fuori). – Quentin

Non che io sia ogni utente, ma odio i siti che lo fanno con numeri di telefono, CC e SS. Preferisco di gran lunga i siti che interpretano la prossima pressione di un tasto come andare alla casella successiva e digitarla. Nel tuo caso, aspetta la quinta pressione del tasto, se è un numero, sposta lo stato attivo sulla casella successiva e imposta il primo carattere sul numero premuto. Se si tratta di un tasto freccia destra, spostati nella casella successiva e non impostare alcun carattere. Solo la mia opinione sull'usabilità. – jball

Oh, e se l'utente commette un errore nell'immissione dell'ultimo carattere in una determinata casella, probabilmente vorrebbe che il loro tasto backspace continui a funzionare. – Quentin

Non ho usato questo strumento prima, ma fa quello che vuoi. Si potrebbe basta guardare è fonte per avere alcune idee:

This Plugin on GitHub

Per la vostra situazione, si dovrebbe aggiungere questo codice:

<script type="text/javascript" src="jquery.autotab.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#first').autotab({ target: '#second', format: 'numeric' }); 
    $('#second').autotab({ target: '#third', format: 'numeric', previous: '#first' }); 
    $('#third').autotab({ previous: '#second', format: 'numeric' }); 
}); 
</script>

fonte

2009-12-24 19:03:23 Tauren

Grazie per avermi presentato un ottimo plugin. Altri hanno suggerito l'uso di "onchange()", ma non sembra funzionare bene. Lo script che hai citato usa 'keydown()', 'keypress()' e 'keyup()', che sembrano essere una soluzione migliore. –

non ho ancora testato, ma penso che questo lavoro. Probabilmente metterà anche a fuoco il pulsante quando il quarto campo sarà completato.

$("form input").change(function() { 
    var maxLength = $(this).attr('maxlength'); 

    if($(this).val().length == maxLength) { 
     $(this).next().focus(); 
    } 
}

fonte

2009-12-24 19:06:10

Il codice non sembra funzionare bene. Ho bisogno di cliccare da qualche parte dopo aver riempito 4 lettere per spostare il focus. Ma grazie. Ho avuto l'idea. –

Ah, questo perché il cambiamento viene chiamato solo quando si sposta lo stato attivo, che è un tipo di lame per questo esempio: -). \, Probabilmente è necessario agganciare l'evento keyup. –

Questo non ha quattro campi, ma non convalidare le carte di credito (controllo di integrità, non l'algoritmo di Luhn!). Devo dirti quanto è fastidioso utilizzare più campi per un utente e la tabulazione automatica. Ti consiglio di usare solo un campo.

Da jquery website:

$("#myform").validate({ 
    rules: { 
    field: { 
     required: true, 
     creditcard: true 
    } 
    } 
});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script> 
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> 
<script type="text/javascript"> 
jQuery.validator.setDefaults({ 
    debug: true, 
    success: "valid" 
});; 
</script> 

    <script> 
    $(document).ready(function(){ 
    $("#myform").validate({ 
    rules: { 
    field: { 
     required: true, 
     creditcard: true 
    } 
    } 
}); 
    }); 
    </script> 
    <style>#field { margin-left: .5em; float: left; } 
    #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; } 
    br { clear: both; } 
    input { border: 1px solid black; margin-bottom: .5em; } 
    input.error { border: 1px solid red; } 
    label.error { 
     background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat; 
     padding-left: 16px; 
     margin-left: .3em; 
    } 
    label.valid { 
     background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat; 
     display: block; 
     width: 16px; 
     height: 16px; 
    } 
</style> 
</head> 
<body> 

<form id="myform"> 
    <label for="field">Required, creditcard (try 446-667-651): </label> 
    <input class="left" id="field" name="field" /> 
    <br/> 
    <input type="submit" value="Validate!" /> 
</form> 

</body> 
</html>

fonte

2009-12-24 19:08:30

Una soluzione molto semplice potrebbe andare in questo modo:

<script type="text/javascript"> 
    function input_onchange(me){ 
     if (me.value.length != me.maxlength){ 
      return; 
     } 
     var i; 
     var elements = me.form.elements; 
     for (i=0, numElements=elements.length; i<numElements; i++) { 
      if (elements[i]==me){ 
       break; 
      } 
     } 
     elements[i+1].focus(); 
    } 
</script> 
<form action="post.php" method="post" accept-charset="utf-8"> 
    <input type="text" value="" id="first" size="4" maxlength="4" 
     onchange="input_onchange(this)" 
    /> - 
    <input type="text" value="" id="second" size="4" maxlength="4" 
     onchange="input_onchange(this)" 
    /> - 
    <input type="text" value="" id="third" size="4" maxlength="4" 
     onchange="input_onchange(this)" 
    /> - 
    <input type="text" value="" id="fourth" size="4" maxlength="4" 
     onchange="input_onchange(this)" 
    /> - 
    <p><input type="submit" value="Send Credit Card"></p> 
</form>

fonte

2009-12-24 19:10:39

Grazie. Ho provato i miei browser (Firefox e Safari), ma non sembra funzionare. –

Ho modificato me.value.length! = This.maxlength a me.value.length! = This.maxLength per far funzionare il codice, credo fosse un piccolo errore di battitura – ashofphoenix

@ashofphoenix: lo è stato, grazie! Corretto nella risposta. –

Come altri hanno sollecitato, non farlo. Gli utenti non saranno in grado di anticipare che li inserirai automaticamente, e questo li farà impazzire. Hai pensato agli utenti che copiano e incollano la loro carta di credito? Qual è il vantaggio dell'utilizzo di quattro campi comunque?

Inoltre, non tutte le carte di credito dividono i loro numeri in quattro gruppi di quattro. American Express li divide in tre gruppi di numeri, ad esempio. In questo caso, l'aggiunta e la rimozione dinamica dei campi di testo richiedono problemi.

Invece, utilizzare il Javascript per inserire automaticamente gli spazi a cui appartengono, facendo avanzare il cursore, non la messa a fuoco. La prima cifra del numero indica il tipo di carta di credito (5 è Mastercard, 4 è Visa, 3 è American Express ...), quindi puoi leggerlo per decidere dove aggiungere gli spazi. Sfrega gli spazi fuori dalla stringa quando la pubblichi. Questo approccio farà risparmiare molto a te e ai tuoi utenti.

fonte

2009-12-24 20:03:43

+1: l'autotabbing è la cosa più fastidiosa quando si inseriscono i dati della carta di credito. Soprattutto se commetti un errore e devi tornare "indietro" – Patrick

Consiglio vivamente di utilizzare il plug-in jQuery Masked Input. http://digitalbush.com/projects/masked-input-plugin/

L'utilizzo sarà simile a questa:

$('#creditCardNumber').mask("9999-9999-9999-9999");

In questo modo avrete il supporto copia-incolla.

fonte

2013-05-09 19:32:22

Come suggerito @Sander, il modo più semplice per fare un auto-scheda è:

jQuery("form input[type=text]").on('input',function() { 
    if(jQuery(this).val().length == jQuery(this).attr('maxlength')) { 
     jQuery(this).next("input").focus(); 
    } 
});

Aggiornamento da @ morespace54

oninput è un HTML5 evento è supportato su IE9 + , quindi puoi usare keyup invece.

fonte

2013-06-10 16:01:53 Ouadie

Solo per far sapere a tutti che anche se il codice sopra funziona perfettamente su FF/Chrome/Safari/Opera (grazie a @Ouadie), ho avuto difficoltà a farlo lavoro in IE (Doh) anche su v8. Sono riuscito a farlo funzionare anche in IE cambiando input per keyup. Così va: 'jQuery (" form input [type = text] "). On ('keyup', function() { \t if (jQuery (this) .val(). Length == jQuery (questo) .attr ('maxlength')) { jQuery (this) .next ("input"). focus(); } }); ' – morespace54

' oninput' è ** IE9 + **, ecco perché lo fa non funziona in ** IE8 ** Aggiornerò la soluzione. Grazie;) – Ouadie

Oh, non sapevo di IE9 + usando l'input. Grazie. Vorrei che un giorno, viviamo in un mondo senza IE ...;) – morespace54

Se i campi del modulo sono uno accanto all'altro come nel tuo esempio, puoi semplicemente sfruttare nextElementSibling e voilà!

function skipIfMax(element) { 
 
    max = parseInt(element.dataset.max) 
 
    
 
    
 
    if (element.value.length >= max && element.nextElementSibling) { 
 
    element.nextElementSibling.focus(); 
 
    } 
 
}

<input type="text" data-max=2 oninput="skipIfMax(this)"/> 
 
<input type="text" data-max=3 oninput="skipIfMax(this)"/> 
 
<input type="text" data-max=4 oninput="skipIfMax(this)"/> 
 
<input type="text" data-max=5 oninput="skipIfMax(this)"/>

fonte

2016-10-24 15:00:16

Spostamento di un focus quando il campo di testo di input raggiunge una lunghezza massima

risposta

Problemi correlati