maschera del tempo di input usando jquery

Question

Sto usando meioMask - un plugin maschera jQuery per inserire la maschera del tempo in una casella di testo. Ecco lo JsFiddle. Funziona bene. Ma ho anche bisogno di inserire hh:mm nella casella di testo, per consentire all'utente di sapere cosa inserire nella casella di testo.

Come fare questo.

MODIFICA: Devo anche inserire am/pm nella maschera. e ho bisogno del formato orario di 12 ore.

Answer 1

Sembra che si dovrebbe essere in grado di impostare questo con il plugin.

Ecco un inizio forse?

Se si guarda nel codice, penso che si dovrebbe passare setMask un oggetto options. Sembra che defaultValue sia un'opzione possibile.

Sembra che il seguente dovrebbe funzionare (ma non è così):

$("#txtTime").setMask({mask: "time", defaultValue:"hh:mm"}); 

Questo è quello che stavo guardando:

$.fn.extend({ 
     setMask : function(options){ 
      return $.mask.set(this, options); 
     }, 

E

 // default settings for the plugin 
     options : { 
      attr: 'alt', // an attr to look for the mask name or the mask itself 
      mask: null, // the mask to be used on the input 
      type: 'fixed', // the mask of this mask 
      maxLength: -1, // the maxLength of the mask 
      defaultValue: '', // the default value for this input 

Answer 2

penso che questo potrebbe funzionare

$(document).ready(function(){ 

    $("#txtTime").setMask('time').val('hh:mm'); 

}) 

http://www.jsfiddle.net/9dgYN/1/

Answer 3

È possibile utilizzare l'placeholder attributi HTML5 per creare il testo segnaposto, quindi utilizzare jQuery per aggiungere il supporto per i browser che non lo supportano, e rimuovere una volta che l'elemento input diventa attivo.

var timeTxt = $("#txtTime").setMask('time'); 
var placeholder = timeTxt.attr('placeholder'); 

timeTxt.val(placeholder).focus(function(){ 
    if(this.value === placeholder){ 
     this.value = ''; 
    } 
}).blur(function(){ 
    if(!this.value){ 
     this.value = placeholder; 
    } 
}); 

Vedere: http://www.jsfiddle.net/9dgYN/2/. Si dovrebbe inoltre considerare l'utilizzo di uno script come Modernizr per aggiungere il rilevamento di funzionalità per l'attributo placeholder.

Answer 4

Se lo vuoi semplice e pulito ecco una demo veloce, ma completa, (Vedi: http://jsfiddle.net/bEJB2/) che include uno placeholder e una maschera che lavorano insieme. Usa il plugin jQuery jquery.maskedinput. Il JavaScript è così pulito e chiaro

<div class="time-container"> 
    <h1> Demo of Mask for 12 Hour AM/PM Input Field w/ Place Holder </h1> 

    <input class="timepicker" type="text" size="10" placeholder="hh:mm PM" /> 
</div> 
<script> 
    $.mask.definitions['H'] = "[0-1]"; 
    $.mask.definitions['h'] = "[0-9]"; 
    $.mask.definitions['M'] = "[0-5]"; 
    $.mask.definitions['m'] = "[0-9]"; 
    $.mask.definitions['P'] = "[AaPp]"; 
    $.mask.definitions['p'] = "[Mm]"; 

    $(".timepicker").mask("Hh:Mm Pp"); 
</script> 

Mi associo cosa @YiJiang detto a proposito PolyFills and Modernizr per placeholder movimentazione nei browser non HTML5 pure.

Answer 5

utilizzando jQuery Masked Input Plugin.

$.mask.definitions['H'] = "[0-2]"; 
$.mask.definitions['h'] = "[0-9]"; 
$.mask.definitions['M'] = "[0-5]"; 
$.mask.definitions['m'] = "[0-9]"; 
$(".timepicker").mask("Hh:Mm", { 
    completed: function() { 
     var currentMask = $(this).mask(); 
     if (isNaN(parseInt(currentMask))) { 
      $(this).val(""); 
     } else if (parseInt(currentMask) > 2359) { 
      $(this).val("23:59"); 
     }; 
    } 
});