HTML mit selektivem Bearbeiten von Datum (persistent Platzhalter Text)

Question

Ich bin auf der Suche nach einer Möglichkeit, ein Eingabefeld für die Eingabe eines Datums und einer Uhrzeit mit persistenten Platzhalter Text. Es sollte:

• unterstützen Anzeige kontinuierlich einen Platzhaltertext mit einem Format, z. yyyy-mm-dd
• erlauben nur Ziffern des Formats (Platzhalter-Text)
• zu einer nächsten Gruppe von Ziffern (Tag, Monat, Jahr) überspringen zu bearbeiten, nachdem ein aktuelles

So etwas wie Chrome Standard-Steuerelemente Füllung für <input type="datetime-local"> wäre toll, aber es muss für Firefox und Internet Explorer 11 funktionieren.

Ich begann mit der Implementierung einer Lösung, wo ich zwei input Felder haben - eins nach dem anderen. Der eine hinter wäre Stile als Platzhalter und aktualisiert auf Textänderungen von einem anderen (vorne).

Und ich kann nicht glauben, dass es nichts ist überall dieses Verhalten zu simulieren ...

Ich mag es in AngularJS verwenden, aber jede Art von Skript sollte leicht anzupassen sein. Dies wird nur ein festes Datetime-Format behandeln, so dass es eine sehr vereinfachte Lösung sein könnte.

Answer 1

Durch ein einfaches Javascript habe ich getan, was Sie vorgeschlagen haben. Es unterscheidet sich jedoch von Ihrer Lösung. Es funktioniert nicht genau wie Typ = datetime-local, aber mit etwas mehr Zeit und Aufwand kann es getan werden. Ich hoffe, das hilft Ihnen:

year.onkeydown = validateInput; 
 
year.onkeyup = tab; 
 
month.onkeydown = validateInput; 
 
month.onkeyup = tab; 
 
day.onkeydown = validateInput; 
 
day.onkeyup = tab; 
 

 
function validateInput() { 
 
    /*Unicode stuff*/ 
 
    var character = [8, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 190]; 
 
    var unicode = event.keyCode ? event.keyCode : event.charCode; 
 
    /*Filters Invalid Characters Like Letters*/ 
 
    if (character.indexOf(unicode) === -1) { 
 
    return false; 
 
    } 
 
    /*Allow backspacing*/ 
 
    else if (character.indexOf(unicode) === 0) { 
 
    return true; 
 
    } 
 
    /*Only allow up to four characters in year*/ 
 
    else if (this.value.length >= 4 && this.id === 'year') { 
 
    return false; 
 
    } 
 
    /*only allow up to two characters in month and date*/ 
 
    else if (this.value.length >= 2 && (this.id === 'day' || this.id === 'month')) { 
 
    return false; 
 
    } 
 
} 
 

 
/*This funciton puts the focus of the element to the next element, hence automatic tbbing*/ 
 
function tab() { 
 
    if (this.value.length >= 4 && this.id === 'year') { 
 
    this.nextElementSibling.focus(); 
 
    } else if (this.value.length >= 2 && (this.id === 'day' || this.id === 'month')) { 
 
    this.nextElementSibling.focus(); 
 
    } 
 
}

#year, #month, #day { 
 
    width:30px; 
 
}

<input type='text' id='year' placeholder='yyyy'> 
 
<input type='text' id='month' placeholder='mm'> 
 
<input type='text' id='day' placeholder='dd'>

Viel Glück!