Smart data di maschera, mentre l’inserimento di data

C’è un modo in javascript o jQuery per rilevare e modificare dinamicamente durante la digitazione di una data per una chiave di ingresso e un copia e incolla di una casella di testo?

Sto cercando di creare un funzionale casella di testo che ha due cifre, ad esempio un mese.

Dal mese può essere un numero da 1 – 12 voglio applicare la prima cifra da un 1 o uno 0.

Il trucco che sto cercando di fare, tuttavia, è quando la casella di testo per primo conquista il fuoco e un utente di iniziare a digitare un numero, se è il numero 2 – 9 ho voglia zero di compilare automaticamente il primo posto e poi, ma alle 9 del secondo posto.

Prima di digitare nulla questa data l’input è questo:

__/__/_____

Se di tipo “1”

1_/__/_____

Se di tipo “2” dovrebbe ottenere

02/__/_____

Se scrivo “22” dovrebbe ottenere

02/2_/_____

Se di tipo “77”, che dovrebbe ottenere

07/07/_____

Sarei molto interessato ad una risposta con il codice o un link di uno strumento che già fa questo o un link a un post precedente?

Alla fine voglio mettere in un mascherate in modo 7/7/2011 o 7/7/11 o 07/07/2011 sarà sempre riempire di 07/07/2011. Nel finale, la versione che sto cercando di ottenere l’esercizio di default per il decennio in corso, ma hanno un menu a discesa per ogni anno 10++ –.

Da una prospettiva dell’utente finale, trovo che questi tipi di cose molto effing fastidioso. Questa è solo la mia opinione, naturalmente. Vorrei verificare l’esperienza utente stack di exchange per i consigli sul modo migliore per fare questi. Essi possono avere una soluzione già fatta.

OriginaleL’autore RetroCoder | 2012-07-19

3 Replies
  1. 2

    Perché non allegare un listener per la sfocatura della casella di testo, piuttosto che per l’utente a digitare.

    Pensare l’esperienza dell’utente se si sono state digitando “1”, e tutto ad un tratto, l’ingresso ha iniziato l’aggiunta o la rimozione di zeri a quello che stavi facendo, mentre si stavano facendo?

    var dayInput = document.getElementById("day-input");
    //usually, I'd just use event-listeners, but feel free to refactor
    dayInput.onblur = handleDayOrMonth;
    
    function handleDayOrMonth () {
        var el = (this === window) ? event.srcElement : this,
            number_string = el.value;
    
        //checking that it's an actual number
        if (!isNaN(parseInt(number_string)) {
            if (number_string.length === 1) { el.value = "0" + number_string; }
        }
    }

    Gestione dell’anno sembra essere lo stesso, tranne che si sarebbe aggiunta di “20” per l’avvio di qualsiasi cosa.

    Sentitevi liberi di jQuery in su.

    L’esperienza degli utenti non dovrebbe essere influenzata se l’ingresso è mascherato. <shrugg>
    Sì. L’esperienza ideale, se si sta andando a che difficoltà, è quello di permettere all’utente di inserire i valori in qualsiasi modo si desidera, e quindi formato nel vostro risultato atteso per il POST del form al server. E le uniche volte che in realtà dovrebbe costringere questi formati è se: a) non si sta andando a fare di nascosto convalida o b) si tratta di una legittima parte dell’esperienza (come imbottitura 0s su un orologio o un timer).
    Mi piace questa idea. Ho visto una visualizzazione espansa pop fuori una sorta di “zoom” che mostra ciò che si sta digitando, al tempo stesso, mostrando come la sua auto magicamente la formattazione in ingrandita parte.

    OriginaleL’autore Norguard

  2. 2

    Credo che la funzionalità che si desidera è fornito dalla jQuery Mascherato plugin di Ingresso

    Demo: http://jsfiddle.net/SO_AMK/SEXAj/

    Si prega di notare che consente anche solo caratteri numerici.

    Sto già utilizzando questo codice javascript e se si ri-leggere il bounty descrizione i requisiti devono essere chiari.
    Sono stato in grado di legarsi l’evento keydown. Grazie per la jsfiddle. Io a malincuore aggiudicazione 50 pts.
    Grazie. Scusa non ho risposto prima, ma non ho una soluzione migliore, quindi non c’era alcun punto di dire qualsiasi cosa 🙂

    OriginaleL’autore A.M.K

Lascia un commento