我正在使用meioMask – 一个 jQuery 掩码插件,用于将时间掩码放入文本框中。这是JsFiddle。它运作良好。但我还需要hh:mm
输入文本框,让用户知道在文本框中输入什么。
这该怎么做。
编辑:我还需要将 am/pm 放在掩码中。我需要 12 小时的时间格式。
如果您希望它简单干净,这里有一个快速但完整的演示(请参阅: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 和 Modernizrplaceholder
在非 HTML5 浏览器中的处理。
我认为这可能有效
$(document).ready(function(){
$("#txtTime").setMask('time').val('hh:mm');
})
看起来您应该可以使用插件进行设置。
也许这是一个开始?
如果您查看代码,我认为您应该传递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
使用 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");
};
}
});
您可以使用 HTML5placeholder
属性创建占位符文本,然后使用 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/。您还应该考虑使用诸如Modernizrplaceholder
之类的脚本来为属性添加特征检测。