Eingang Zeit-Maske mit jquery

Ich bin mit meioMask – ein jQuery-Maske plugin zu setzen, Zeit, die Maske in einer textbox. Hier ist die JsFiddle. Es funktioniert gut. Aber ich muss auch legen hh:mm Sie in das Textfeld, damit der Benutzer wissen, was zu geben Sie in das Textfeld ein.

Wie dies zu tun.

EDIT: ich auch brauchen, um am/pm in die Maske. und ich brauche 12 Stunden Uhrzeit-format.

InformationsquelleAutor Vaibhav Jain | 2010-10-19

  1. 3

    Sieht es aus wie Sie sollten in der Lage sein, dies mit dem plugin.

    Hier ist ein Anfang vielleicht?

    Wenn Sie einen Blick in den code, ich denke, Sie sollten vorbei setMask eine options Objekt. Es sieht aus wie defaultValue ist eine mögliche option.

    Sieht es wie folgt funktionieren sollte (aber nicht):

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

    Dies ist, was ich suchte:

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

    Und 

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

    InformationsquelleAutor Peter Ajtai

  2. 5

    Wenn Sie es wollen, einfach und sauber, hier ist eine kurze, aber vollständige, demo (Siehe: http://jsfiddle.net/bEJB2/ ) mit einem placeholder und einer Maske zusammen zu arbeiten. Es verwendet die jQuery-Plugin jquery.maskedinput. Der JavaScript-Code ist so sauber und klar 

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

    Ich würde wiederholen, was @YiJiang sagte über PolyFills und Modernizr für placeholder Handhabung in nicht-HTML5-Browser als auch.

    InformationsquelleAutor Eric D. Johnson

  3. 3

    Ich denke, das könnte funktionieren

        $(document).ready(function(){

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

})

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

    warum kann ich nicht mit setMask()? Uncaught TypeError: Object [object Object] has no method 'setMask' Anderen jquery-codes sind normalerweise zu arbeiten. Auch ich sehe keine Referenz auf setMask auf jquery.com.

    InformationsquelleAutor chobo2

  4. 1

    Können Sie die HTML5 - placeholder Attribut zu erstellen, die Platzhalter-text, dann die jQuery-hinzufügen von Unterstützung für Browser, die nicht unterstützen, und entfernen Sie es, sobald die input element den Fokus erhält. 

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

    Finden Sie unter: http://www.jsfiddle.net/9dgYN/2/. Sie sollten auch erwägen, ein Skript wie Modernizr hinzufügen feature-Erkennung für die placeholder Attribut.

    InformationsquelleAutor Yi Jiang

  5. 1

    mithilfe von jQuery Masked Input Plugin.

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

    InformationsquelleAutor Alex

Schreibe einen Kommentar