使用 jquery 输入时间掩码答案

【问题标题】：input time mask using jquery使用 jquery 输入时间掩码
【发布时间】：2011-04-27 07:02:54
【问题描述】：

我正在使用meioMask - 一个 jQuery 掩码插件，用于将时间掩码放入文本框中。这是JsFiddle。它运作良好。但我还需要在文本框中输入hh:mm，让用户知道在文本框中输入什么。

如何做到这一点。

编辑：我还需要将 am/pm 放入掩码中。我需要 12 小时的时间格式。

【问题讨论】：

【解决方案1】：

如果您希望它简单干净，这里有一个快速但完整的演示（请参阅：http://jsfiddle.net/bEJB2/），其中包括一个 placeholder 和一个协同工作的面具。它使用 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 所说的关于PolyFills and Modernizr 对于placeholder 在非HTML5 浏览器中的处理。

【讨论】：

【解决方案2】：

看来您应该可以使用插件进行设置。

也许这是一个开始？

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

看起来以下应该可以工作（但它没有）：

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

这是我在看的：

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

还有

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

【讨论】：

【解决方案3】：

我认为这可能有效

    $(document).ready(function(){

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

})

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

【讨论】：

为什么我不能使用 setMask()？ Uncaught TypeError: Object [object Object] has no method 'setMask' 其他 jquery 代码工作正常。另外，我在 jquery.com 上没有看到任何对 setMask 的引用。

【解决方案4】：

使用 jQuery 屏蔽输入插件。

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

【讨论】：

【解决方案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 属性添加特征检测。

【讨论】：