Dynamiczna inteligentna maska ​​daty podczas wstawiania daty

Question

Czy istnieje sposób w javascript lub jQuery do dynamicznego wykrywania i zmiany podczas wpisywania daty zarówno dla klucza wejściowego, jak i kopiowania i wklejania do pola tekstowego?

Próbuję utworzyć funkcjonalne pole tekstowe, które ma dwie cyfry, na przykład miesiąc.

Ponieważ miesięcy może być liczbą od 1 - 12 Chcę wymusić pierwszą cyfrę być 1 lub 0.

Sztuką że próbuję zrobić jednak jest, gdy pole tekstowe pierwszy zyskuje ostrość i użytkownik zaczyna pisać numer, jeśli ta liczba to 2 - 9 Chcę, żeby zero automatycznie wypełniło pierwsze miejsce, a następnie, ale 9, w drugim miejscu.

Zanim wpisać cokolwiek to data wejścia będzie wyglądać tak:

__/__/_____ 

Gdybym wpisać "1"

1_/__/_____ 

Gdybym wpisać "2" powinien dostać

02/__/_____ 

Jeśli wpiszę "22", powinien otrzymać

02/2_/_____ 

Gdybym wpisać „77” powinien dostać

07/07/_____ 

Byłbym bardzo zainteresowany w odpowiedzi z kodem lub link do narzędzia, które już to robi lub link do poprzedniego postu?

Ostatecznie chcę umieścić go w zamaskowanym, więc 7/7/2011 lub 7/7/11 lub 07/07/2011 będzie zawsze wypełnić do 07/07/2011. W ostatecznej wersji końcowej próbuję ustawić rok domyślny na bieżącą dekadę, ale z każdym rokiem rozwijam się ++ -.

Answer 1

Dlaczego nie dołączyć detektora do rozmycia w polu tekstowym, a nie do wpisywania przez użytkownika.

Pomyśl o doświadczeniu użytkownika, jeśli wpisujesz "1", i nagle wprowadzono dodanie lub usunięcie zer do tego, co robiłeś, podczas gdy robiłeś to?

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

Postępowanie z rokiem byłby taki sam, z wyjątkiem tego, że dodajesz "20" na początku, niezależnie od tego, co to jest.

Zapraszam do jQuery go.

Answer 2

wierzę, że funkcje, które chcesz jest przez Demo jQuery Masked Input plugin

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

Należy pamiętać, że również pozwala tylko znaków numerycznych.

Answer 3

Odpowiedź brzmi tutaj ... jQuery masked input plugin.