IE & Backspace - Datum eingabescript
ein Admin
- javascript
Hallo,
ich habe ein mehr oder weniger kleines Script geschrieben was mit JS bei der Eingabe prüft ob ein Datum herauskommen kann. Jetzt zu meinem Problem: Sobald ich im IE Backspace drücke nutzt dieser history.back wobei einfach nur das letzte Zeichen gelöscht werden soll -.-
Alle anderen Browser machen es Richtig!
Bitte um Hilfe
<html>
<head>
<title>Test</title>
<script type="text/javascript">
var focus_eingabe_datum = false;
function aus()
{
focus_eingabe_datum = false;
}
function an()
{
focus_eingabe_datum = true;
}
function TasteGedrueckt (Ereignis) {
if(focus_eingabe_datum != true)
{
//do nothing
}
else
{
var datum = document.getElementById("eingabe2").value;
if (!Ereignis)
Ereignis = window.event;
if (Ereignis.which) {
Tastencode = Ereignis.which;
} else if (Ereignis.keyCode) {
Tastencode = Ereignis.keyCode;
}
if(Tastencode < 48 || Tastencode > 59)
{
if(Tastencode == 8){ //löschen von einem Zeichen
letztetaste = 8;
AusgabeDatum = AusgabeDatum.substring(0,AusgabeDatum.length-1);
datum = AusgabeDatum;
document.getElementById("eingabe2").value = AusgabeDatum;
}
}
else
{
datum += String.fromCharCode(Tastencode);
if(datum.length == 1 && Tastencode < 52 ){
AusgabeDatum = datum;
document.getElementById("eingabe2").value += AusgabeDatum;
erstetaste = Tastencode;
}else if (datum.length == 1){
datum = AusgabeDatum;
}
if(datum.length == 2 && erstetaste == 51 && Tastencode < 50){
AusgabeDatum = datum+'.';
document.getElementById("eingabe2").value = AusgabeDatum;
}else if(datum.length == 2 && erstetaste == 48 && Tastencode == 48){
}else if(datum.length == 2 && erstetaste < 51 && Tastencode > 47){
AusgabeDatum = datum+'.';
document.getElementById("eingabe2").value = AusgabeDatum;
}else if(datum.length == 2){
datum = AusgabeDatum;
}
if(datum.length == 3 && Tastencode < 50 && letztetaste == 8){ //Punkt nach löschen und neueingabe
datum=datum.substring(0,datum.length-1);
AusgabeDatum = datum+'.'+String.fromCharCode(Tastencode);
datum = AusgabeDatum;
document.getElementById("eingabe2").value = AusgabeDatum;
}
if(datum.length == 4 && Tastencode < 50){
AusgabeDatum = datum;
document.getElementById("eingabe2").value = AusgabeDatum;
letzteTaste = Tastencode;
}else if(datum.length == 4){
datum = AusgabeDatum;
}
if(datum.length == 5 && Tastencode < 58 && letzteTaste == 48 && Tastencode != 48){
AusgabeDatum = datum+'.';
document.getElementById("eingabe2").value = AusgabeDatum;
}else if(datum.length == 5 && letzteTaste == 49 && Tastencode < 51){
AusgabeDatum = datum+'.';
document.getElementById("eingabe2").value = AusgabeDatum;
}else if(datum.length == 5 ){
datum = AusgabeDatum;
}
if(datum.length == 6 && Tastencode < 51 && Tastencode > 48 && letztetaste == 8){ //Punkt nach löschen und neueingabe
datum=datum.substring(0,datum.length-1);
AusgabeDatum = datum+'.'+String.fromCharCode(Tastencode);
datum = AusgabeDatum;
document.getElementById("eingabe2").value = AusgabeDatum;
}
if(datum.length == 7 && Tastencode < 51 && Tastencode > 48){
AusgabeDatum = datum;
document.getElementById("eingabe2").value = AusgabeDatum;
letzteTaste = Tastencode;
}else if(datum.length == 7){
datum = AusgabeDatum;
}
if(datum.length == 8 && Tastencode > 56 && letzteTaste == 49){
AusgabeDatum = datum;
document.getElementById("eingabe2").value = AusgabeDatum;
}else if(datum.length == 8 && Tastencode > 47 && letzteTaste == 50){
AusgabeDatum = datum;
document.getElementById("eingabe2").value = AusgabeDatum;
}else if(datum.length == 8){
datum = AusgabeDatum;
}
if(datum.length == 9 && Tastencode > 47 && letzteTaste == 50){
AusgabeDatum = datum;
document.getElementById("eingabe2").value = AusgabeDatum;
}else if(datum.length == 9 && Tastencode > 52 && letzteTaste == 49){
AusgabeDatum = datum;
document.getElementById("eingabe2").value = AusgabeDatum;
}else if(datum.length == 9){
datum = AusgabeDatum;
}
if(datum.length == 10){
AusgabeDatum = datum;
document.getElementById("eingabe2").value = AusgabeDatum;
}
};
}
}
document.onkeypress = TasteGedrueckt;
</script>
</head>
<body>
<p><input type="text" id="eingabe2" name="eingabe2" readonly="readonly" size="50" onfocus="an();" onblur="aus();"></p>
</body>
</html>
Hi,
mir ist nicht ganz klar was passieren sollte, aber im Chrome, Fx7 und IE9 kann ich nichts in das Feld eingeben.
Wenn du sicherstellen willst dass ein Datum eingegeben wurde, warum verwendest du nicht einfach type="date" beim Eingabefeld?
~dave
Erstmal Danke für die schnelle Antwort.
Habe mir gerade mal den Quelltext vom online Beispiel angeschaut festgestellt das um die kommpletten funktionen nochmal ein window.addEvent herum gekommen ist.
//<![CDATA[
window.addEvent('load', function() { });//]]>
Ist aber nicht von mir?!
Sobald das raus ist gehts wieder.
Es prüft ob das eingegeben zeichen an dieser Stelle Teil eines Datums sein kann und setzt Trennzeichen (.) selbst.
Hi,
Ist aber nicht von mir?!
Stimmt, von dir kam gar kein Online-Beispiel. Und das obwohl du das Problem hast :-P
Sobald das raus ist gehts wieder.
Funktionierts mit einem return false falls Backspace gedrückt wurde?
Ich finde dein Unterfangen übrigens dämlich. Ich hasse Seiten auf denen ich mit Backspace nicht in der Browser-History zurück kann.
Die Frage warum du nicht einfach <input type="date"/> mit min- und max-value verwendest hast du auch gekonnt ignoriert.
Wenn du input@type=date nicht verwendet willst dann mach wenigstens nicht document.onkeypress sondern nur beim input.
Und das Readonly würde ich auch entfernen, Leute die kein Javascript aktiviert haben schließt du sonst komplett aus.
~dave
also <input type="date"/> kann ich nicht nehmen da es ab IE6 laufen soll.
Es soll auch kein frei Webseite werden sondern ein Programm was Webbasiert im Unternehmen Läuft.
Das problem ist ja das ich backspace brauche, aber es halt nur im das letzte Zeichen löschen soll und sonst nix wie z.b. in der seite zurück zugehen.
Hi,
Es soll auch kein frei Webseite werden sondern ein Programm was Webbasiert im Unternehmen Läuft.
Das sind andere Grundvoraussetzungen, fällt IMHO unter "Erwähne besondere Umgebungsbedingungen wie Browser und Betriebssystem etc. Für ein Intranet gelten z.B. andere Maßstäbe als für im World Wide Web veröffentlichte Seiten."
Das problem ist ja das ich backspace brauche, aber es halt nur im das letzte Zeichen löschen soll und sonst nix wie z.b. in der seite zurück zugehen.
Das weiß ich, hast du das gelesen:
Funktionierts mit einem return false falls Backspace gedrückt wurde?
Wenn du input@type=date nicht verwendet willst dann mach wenigstens nicht document.onkeypress sondern nur beim input.
Und das Readonly würde ich auch entfernen, Leute die kein Javascript aktiviert haben schließt du sonst komplett aus.
also <input type="date"/> kann ich nicht nehmen da es ab IE6 laufen soll.
Dann klinke ich mich hier aus. IE6 ist mir zu doof :-)
~dave
super -.-
wenn chef sagt IE6 dann solls auch IE6 sein, kann ich auch nicht ändern.
Kann sonst bitte jemand helfen wie ich das broblem lösen kann?
Moin!
Ich hab ehrlich gesagt, immer noch keine Ahnung, was Dein Problem eigentlich ist. In einem funnktionierendem Inputfeld funktionert Backspace ganz normal. Wenn Du jetzt daherkommst und die Tastatureingaben vergewaltigst und dem Benutzer eine Eingabe in ein auf readonly Feld vorgaukelst, musst Du dich nicht wundern. Lass doch einfach diese ueblen Verrenkungen. Warum ist das Feld eigentlich readonly, da Du ja sowieso Tasten lustig blockierst und irgendeine, vom User nicht gewollte, Eingabe erzwingst?
Wenn Du ein Datum in einer bestimmten Form benoetigst, dann stell dem User einen Kalender zur Verfuegung, auf dem er klicken kann.
du wirst lachen das mit dem kalender habe ich drin und wir von dem kunden nicht gewollt weil da zuvielö gesucht werden muss wenn man ein geb. datum eingeben will und ich stehe jetzt vor der aufgabe das so zumachen das man nur datrum eingeben kann und nix anderes. Das ganz auch nur mit dem numblock
So.
Du scheinst ja noch etwas gruen zu sein. Also nehm ich mir mal etwas Zeit.
Warum ist das Feld readonly? Genau das loest das Verhalten des IE aus, mit Backspace zurueckzugehen. Deine Tastaturabfrage wird gar nicht erst ausgefuehrt, weil Du keine machen kannst.
Ansonsten ist die Umsetzung echter Mist. Mit sowas wuerd ich nicht arbeiten wollen. Aber wenn sinnvolle Dinge nicht erlaubt sind... Eine serverseitige Pruefung mit Affenformular waere die einzig vernuenftige Varainte. Aber ich selbst hatte auch schon genau das Problem, das ich sowas nicht machen durfte. Bei mir werkelt nun ein Kalender.
Mal davon ab, dass Dein Code wirklich verbesserungswuerdig ist. Die ganzen Meldungen, dass eine Variable undefined ist, koennen ruhig verschwinden. Dann ist Dein Code selbst suboptimal. Jedenfalls aus meiner Sicht ist dieses ganze onfocus und onblur Gedoens unnoetig. Wenn der Code nur in bestimmten Faellen funktionieren soll, dann ruf ihn auch nur bei diesen Faellen auf. Trigger ihn also nicht global, sondern nur, wenn auch Bedarf ist. (In dem Feld) Das erspart Dir einige unnoetige Zeilen und loest auch das Problem, warum du das Feld wahrscheinlich auf readonly gesetzt hast:
Wenn Du deine Funktion mit return false abschliesst, wird jede Tastatureingabe abgewuergt. Damit das bei deinem jetzigem Code auch funktioniert, du aber andere inputs beschreiben kannst, musst du bei einem anderen Feld als dem Datumsfels return true liefern.
Ergo: Ordentlich entwickelt, funktioniert Deine Methode auch mit einem IE, der Backspace als BackTo benutzt.
also erst mal danke ABER:
er IE erkennt nur backspace mit onkeydown und nicht mit onkeypress und darum ist er auch nicht in die abfrage gesprungen sondern hat backto genutzt.
Habs jetzt den code erweitert und jetzt geht alles:
if (document.all) // Abfrage nur bei IE nötig
document.onkeydown = sonderEingabe;
function sonderEingabe(e){
if (event.keyCode==8) { // Backspace
var inhalt = document.getElementById("eingabe2").value;
letzteTaste = 8;
document.getElementById("eingabe2").value = inhalt.substring(0, inhalt.length-1);
return false;
}
}
Mal ne kleine doofe Frage nebenher: bekommst Du da Geld fuer oder ist das vielleicht sowas wie ein Praktikum?
so alles noch mal überarbeitet :D
function Datum_Direkteingabe_geb(evt)
{
charCode=0;
if(evt.charCode)
charCode = evt.charCode;
if (typeof event != 'undefined')
charCode = event.keyCode;
if (charCode <= 13)
{
return true;
}
else
{
var datum_zeichen = document.getElementById("Datum_Direkteingabe").value.length;
if(datum_zeichen == 2 || datum_zeichen == 5)
{
document.getElementById("Datum_Direkteingabe").value = document.getElementById("Datum_Direkteingabe").value+".";
}
datum_zeichen = document.getElementById("Datum_Direkteingabe").value.length;
var keyChar = String.fromCharCode(charCode);
datum = document.getElementById("Datum_Direkteingabe").value+keyChar;
switch (datum_zeichen) {
case 0:
var re = /^([0-3]{1})$/;
return re.test(datum);
break;
case 1:
var re = /^(([1-2]{1}[0-9]{1})|([3]{1}[0-1]{1})|([0]{1}[1-9]{1}))$/;
return re.test(datum);
break;
case 3:
var re = /^(([1-2]{1}[0-9]{1})|([3]{1}[0-1]{1})|([0]{1}[1-9]{1})).([0-1]{1})$/;
return re.test(datum);
break;
case 4:
var re = /^(([1-2]{1}[0-9]{1})|([3]{1}[0-1]{1})|([0]{1}[1-9]{1})).(([0]{1}[1-9]{1})|([1]{1}[1-2]{1})|([1]{1}[0-2]{1}))$/;
return re.test(datum);
break;
case 6:
var re = /^(([1-2]{1}[0-9]{1})|([3]{1}[0-1]{1})|([0]{1}[1-9]{1})).(([0]{1}[1-9]{1})|([1]{1}[1-2]{1})|([1]{1}[0-2]{1})).([1-2]{1})$/;
return re.test(datum);
break;
case 7:
var re = /^(([1-2]{1}[0-9]{1})|([3]{1}[0-1]{1})|([0]{1}[1-9]{1})).(([0]{1}[1-9]{1})|([1]{1}[1-2]{1})|([1]{1}[0-2]{1})).([2]{1}[0]{1}|[1]{1}[9]{1})$/;
return re.test(datum);
break;
case 8:
var re = /^(([1-2]{1}[0-9]{1})|([3]{1}[0-1]{1})|([0]{1}[1-9]{1})).(([0]{1}[1-9]{1})|([1]{1}[1-2]{1})|([1]{1}[0-2]{1})).([2]{1}[0]{1}[0-9]{1}|[1]{1}[9]{1}[5-9]{1})$/;
return re.test(datum);
break;
case 9:
var re = /^(([1-2]{1}[0-9]{1})|([3]{1}[0-1]{1})|([0]{1}[1-9]{1})).(([0]{1}[1-9]{1})|([1]{1}[1-2]{1})|([1]{1}[0-2]{1})).([2]{1}[0]{1}[0-9]{1}[0-9]{1}|[1]{1}[9]{1}[5-9]{1}[0-9]{1})$/;
return re.test(datum);
break;
default :
return false;
}
}
}
<input onkeypress="return Datum_Direkteingabe_geb(event)" type="text" size=30 name="Datum_Direkteingabe" id="Datum_Direkteingabe" />