маска времени ввода с помощью jquery - PullRequest
Новая
       1

маска времени ввода с помощью jquery

5 голосов
/ 19 октября 2010

Я использую meioMask - плагин маски jQuery для помещения маски времени в текстовое поле.Вот JsFiddle .Работает хорошо.Но мне также нужно ввести hh:mm в текстовое поле, чтобы пользователь знал, что вводить в текстовое поле.

Как это сделать.

РЕДАКТИРОВАТЬ: Мне также нужно указать am / pm в маске.и мне нужно 12 часов формата времени.

Ответы [ 5 ]

5 голосов
/ 02 июля 2014

Если вы хотите, чтобы это было просто и понятно, вот быстрая, но полная демонстрация (см .: 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 и Modernizr для обработки placeholder в браузерах, отличных от HTML5.

3 голосов
/ 19 октября 2010

Похоже, вы сможете установить это с помощью плагина.

Вот, может быть, начало?

Если вы посмотрите в коде, я думаю, что вы должны передать setMaskoptions объект.Похоже, 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 голосов
/ 19 октября 2010

Я думаю, что это может сработать 

    $(document).ready(function(){

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

})

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

1 голос
/ 21 марта 2017

, используя плагин для маскирования 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");
        };
    }
});
1 голос
/ 19 октября 2010

Вы можете использовать атрибут 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.

...