masque de temps d'entrée en utilisant jquery

Question

J'utilise meioMask - un plugin masque jQuery pour mettre le masque de temps dans une zone de texte. Voici le JsFiddle. Ça fonctionne bien. Mais j'ai aussi besoin de mettre hh:mm dans la zone de texte, pour indiquer à l'utilisateur ce qu'il faut entrer dans la zone de texte.

Comment faire.

EDIT: J'ai aussi besoin de mettre am/pm dans le masque. et j'ai besoin d'un format horaire de 12 heures.

Answer 1

Il semble que vous devriez pouvoir régler ceci avec le plugin.

Voici peut-être un début? Si vous regardez dans le code, je pense que vous devriez passer setMask un objet options. Il semble que defaultValue est une option possible.

Il ressemble à ce qui suit devrait fonctionner (mais il ne fonctionne pas):

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

C'est ce que je cherchais à:

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

Et

 // 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

Je pense que cela pourrait fonctionner

$(document).ready(function(){ 

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

}) 

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

Answer 3

Vous pouvez utiliser le HTML5 placeholder attribut pour créer le texte de l'espace réservé, puis utilisez jQuery pour ajouter le support pour les navigateurs qui ne supportent pas, et enlever une fois que l'élément input acquiert le focus.

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

Voir: http://www.jsfiddle.net/9dgYN/2/. Vous devez également envisager d'utiliser un script tel que Modernizr pour ajouter la détection de fonctionnalité pour l'attribut placeholder.

Answer 4

Si vous le voulez simple et propre voici une démo rapide, mais complète, (voir: http://jsfiddle.net/bEJB2/) qui comprend un placeholder et un masque travaillant ensemble. Il utilise le plugin jQuery jquery.maskedinput. Le JavaScript est si propre et claire

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

J'écho à ce que @YiJiang dit au sujet de PolyFills and Modernizr pour placeholder la manipulation dans les navigateurs non HTML5 ainsi.

Answer 5

en utilisant le plugin d'entrée jQuery Masked. Pourquoi ne puis-je pas utiliser setMask()?

$.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"); 
     }; 
    } 
});