使用jQuery输入时间掩码

Question

我正在使用jQuery掩码插件meioMask（下载地址：http://github.com/fabiomcosta/jquery-meiomask/raw/08b92c411a60ace9131de697179fda433178b8d9/jquery.meio.mask.js），在文本框中添加时间掩码。这是JsFiddle的链接：http://www.jsfiddle.net/9dgYN/，它的效果不错。但我还需要在文本框中添加hh:mm，以便让用户知道应该输入什么。

请问如何实现呢？ 编辑：我还需要在掩码中添加am/pm，并且需要12小时制时间格式。

- Vaibhav Jain

Answer 1

如果您希望简单明了，这里有一个快速但完整的演示（参见：http://jsfiddle.net/bEJB2/），其中包括“占位符”和“掩码”一起使用。它使用了jQuery插件jquery.maskedinput。JavaScript非常干净明了。

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

我同意 @YiJiang 关于在非 HTML5 浏览器中使用 PolyFills 和 Modernizr 来处理 placeholder 的观点。

- Eric D. Johnson

Answer 2

看起来你应该能够通过插件来设置这个。

也许下面的内容可以帮到你：

如果你查看代码，我认为你应该传递一个options对象给setMask。看起来defaultValue是一种可能的选项。

以下代码看起来应该可以工作（但实际上并没有）：

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

这就是我关注的东西：

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

And (同时)

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

- Peter Ajtai

Answer 3

使用jQuery Masked Input插件。

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

- Alex

Answer 4

我认为这可能有效。

    $(document).ready(function(){

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

})

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

- chobo2

---

为什么我不能使用setMask()方法？出现了“Uncaught TypeError: Object [object Object] has no method 'setMask'”错误。其他jQuery代码正常工作。此外，我在jquery.com上没有看到setMask的任何参考文档。 - marquito

Answer 5

您可以使用HTML5的placeholder属性来创建占位文本，然后使用jQuery为不支持它的浏览器添加支持，并在input元素获得焦点后将其删除。

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

请参考：http://www.jsfiddle.net/9dgYN/2/。您还应该考虑使用类似Modernizr的脚本来为placeholder属性添加特性检测。

- Yi Jiang