jQuery zip masking per più formati

Question

Ho un requisito per mascherare un campo zip in modo che consenta il classico formato a 5 cifre (XXXXX) o 5 + 4 (XXXXX-XXXX).

ho potuto così qualcosa di simile:

$('#myZipField').mask("?99999-9999"); 

ma la complicazione deriva dal fatto che trattino non deve essere visualizzato se l'utente mette in soli 5 cifre.

Questo è il migliore che ho trovato finora - Potrei estenderlo per inserire automaticamente il trattino quando inseriscono la sesta cifra, ma il problema con questo sarebbe un comportamento divertente sulla cancellazione (potrei impedire loro di cancellare il dash ma sarebbe l'applicazione di patch la patch e così via, diventa un incubo):

$.mask.definitions['~']='[-]'; 
$("#myZipField").mask("?99999~9999", {placeholder:""}); 

esiste un fuori del modo scatola di fare questo o devo rotolare il mio?

Answer 1

È non è necessario utilizzare un plug-in diverso. Basta spostare il punto di domanda, in modo che invece di:

$('#myZipField').mask("?99999-9999"); 

si dovrebbe usare:

$('#myZipField').mask("99999?-9999"); 

Dopo tutto, non è l'intera stringa che è opzionale, solo il - ed in avanti.

Answer 2

Perché il campo non deve essere trasparente e avere un oggetto testo dietro di esso con il modulo in grigio chiaro? Quindi vedono ####### - #### sullo sfondo e quindi lo rig in modo che le lettere scompaiano mentre digitano. A quel punto, suggerisce che dovrebbero inserire un trattino se vogliono mettere i quattro in più, giusto? Quindi, puoi semplicemente impostare lo script per autoinserire il trattino se si incasina e digitare 6 numeri?

Answer 3

Se si utilizza già jQuery, ci sono probabilmente centinaia di plug-in per le maschere, ecc, per esempio: http://www.meiocodigo.com/projects/meiomask/

Quindi non credo che avrei dovuto rotolare il proprio

Answer 4

Questo codice di avviamento postale è in realtà semplice, ma quando si ha un formato più complesso da gestire, ecco come è risolto con il plugin (dal demo page):

var options = {onKeyPress: function(cep, e, field, options){ 
    var masks = ['00000-000', '0-00-00-00']; 
    mask = (cep.length>7) ? masks[1] : masks[0]; 
    $('.crazy_cep').mask(mask, options); 
}}; 

$('.crazy_cep').mask('00000-000', options);