jQuery 使用jquery输入时间掩码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3965366/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
input time mask using jquery
提问by Vaibhav Jain
I am using meioMask– a jQuery mask plugin to put time mask in a textbox. Here is the JsFiddle. It's working well. But I also need to put hh:mmin the textbox, to let the user know what to enter in the textbox.
我正在使用meioMask– 一个 jQuery 掩码插件，将时间掩码放入文本框中。这是JsFiddle。它运作良好。但我还需要放入hh:mm文本框，让用户知道在文本框中输入什么。
How to do this.
这该怎么做。
EDIT:I also need to put am/pm in the mask. and I need 12 hrs time format.
编辑：我还需要将 am/pm 放入掩码中。我需要 12 小时的时间格式。
采纳答案by Peter Ajtai
It looks like you should be able to set this with the plugin.
看起来您应该可以使用插件进行设置。
Here's a start maybe?
这可能是一个开始？
If you look in the code, I think you should be passing setMaskan optionsobject. It looks like defaultValueis a possible option.
如果您查看代码，我认为您应该传递setMask一个options对象。看起来defaultValue是一个可能的选择。
It looks like the following should work (but it doesn't):
看起来以下应该有效（但它没有）：
$("#txtTime").setMask({mask: "time", defaultValue:"hh:mm"});
This is what I was looking at:
这就是我在看的：
$.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
回答by Eric D. Johnson
If you want it simple and clean here's a quick, but complete, demo (See: http://jsfiddle.net/bEJB2/) that includes a placeholderand a mask working together. It uses the jQuery Plugin jquery.maskedinput. The JavaScript is so clean and clear
如果您希望它简单干净，这里有一个快速但完整的演示（参见：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>
I would echo what @YiJiang said about PolyFills and Modernizrfor placeholderhandling in non-HTML5 browsers as well.
我想重复一下@YiJiang说，大约PolyFills和Modernizr的对placeholder非HTML5浏览器处理为好。
回答by chobo2
I think this might work
我认为这可能有效
$(document).ready(function(){
$("#txtTime").setMask('time').val('hh:mm');
})
回答by Alex
using jQuery Masked Input Plugin.
使用 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");
};
}
});
回答by Yi Jiang
You can use the HTML5 placeholderattribute to create the placeholder text, then use jQuery to add support for browsers that do not support it, and remove it once the inputelement gains focus.
您可以使用 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;
}
});
See: http://www.jsfiddle.net/9dgYN/2/. You should also consider using a script such as Modernizrto add feature detection for the placeholderattribute.
请参阅：http: //www.jsfiddle.net/9dgYN/2/。您还应该考虑使用Modernizr等脚本为placeholder属性添加特征检测。
