Javascript/Vue - Enter automatisch einfügen?
Hallo,
ich habe gerade folgendes Problem: Habe input Felder und wenn ich dort was eingebe, wird dieser Wert sofort in die Variable geschrieben ohne Enter zu drücken. Nun nutze ich für das Geburtsdatum flatpickr. Dort muss ich aber erst Enter drücken, damit der Wert in der Variable steht.
Kann man wenn der Anwender 8 Zahlen eingibt und zum nächsten Input Feld springt, ohne das er Enter drückt, automatisch Enter drücken lassen, das zumindest der Wert in der Variable ist?
Hier mal ein Beispiel: https://codepen.io/anon/pen/qzYrWZ
Bei name wird die Eingabe sofort in die Variable geschrieben. Bei der Geburtstagseingabe nicht, erst wenn Enter gedrückt wurde.
Hätte es am liebsten, dass der zweite Fall genauso wie der erste Fall abläuft. Quasi bei jeder Eingabe sofort Enter aktiviert und somit den Wert in die Variable schreibt.
Und ich weiß, wenn man auf einen Tag im Kalender klickt, wird das richtig rein geschrieben. Gibt jemand es händisch ein funktioniert es nicht.
Wie muss ich das machen?
mfg werdas34
2 Antworten
Ein passendes Event bietet flatpickr wohl nicht, daher müsstest du selbst einen Event-Handler an das input-Element hängen (welches von flatpickr generiert wird) und auf das input-Event lauschen. In Vue solltest du aber zunächst warten, bis alle Komponenten geladen wurden. Verwende die mounted-Funktion dafür. In dieser holst du dir das input-Element, hängst den Listener an und prüfst bei Aufruf, ob der aktuelle Wert valid ist. Wenn ja, speicherst du ihn.
Dies ist ja bei mir garantiert, entweder durch Eingabe weiterer Input Felder oder durch den Bestell-Button, der erst die Validierung macht. Also spätetestens beim Bestell-Button würde es azsgelöst werden. Die Frage, die ich mir stelle: Wie komme ich an die Werte die in flat-pickr stehen ran?
https://flatpickr.js.org/events/
Ich würde mit onClose arbeiten. Jedoch wie komme ich an diese Werte? Damit ich sie in das v-model laden kann?
Habe jetzt einiges ausprobiert. Die Events helfen mir alle nichts. Egal was ich mache, man muss erst enter drücken, bzw ein Datum im Kalendar wählen.
Hast du eine Idee, wie ich ein Geburtsdatum vom Anwender abfrage, mit flatpickr ohne das er Enter drücken muss?
Du meinst, dass er nicht den bestätigen button drückrn muss?
Der Kunde hat drei Möglichkeiten, wenn man davon ausgeht dass das Datum Format richtig eingegeben wird.
1) Er öffnet den Kalendar und wählt da einen Tag aus. -> Funktioniert ist jedoch bei einem Geburtstag etwas umständlich die ganzen Jahre durchzuswipen.
2)Er gibt das Datum händisch ein und drückt Enter. -> Funktioniert auch. Jedoch muss man nur bei diesem Feld Enter drücken. Bei allen anderen nicht.
3)Er gibt die Daten händisch ein und drückt nicht Enter, sondern klickt einfach woanders hin. -> Funktioniert nicht. Die Daten werden nicht in die Variable geschrieben, die für die Validierung bedacht ist. Durch die Validierung wirkt es sehr konfus für den Kunden, da er glaubt er habe das Feld befüllt, dennoch meckert er dann rum.
Lösungsansätze: Events wie onclose von flatpickr funktionieren nicht. Habe es auf allen Wegen probiert. Man kann nict auf den Wert des Feldes zugreifen, wenn zuvor nicht Enter gedrückt wurde.
Idee, aber keinen Plan wie das funktioniert/ob es überhaupt funktioniert:
Wenn man die Daten eingibt, dann soll Javascript auf diesem Feld, nachdem der Focus weg ist, automatisch ein Enter ausführen.(Sollte irgendwie machbar sein, hoffe ich zumindest. Weiß nur nicht wie, da ich JS/VUE usw. alles in den letzetn zwei Monaten crashkursartig gelernt habe, um das Projekt zu basteln.)
Oder du hast eine andere Idee, Demo ist ja online.
Ich hätte gerne das der Kunde das Datum eingeben kann, denn wenn jemand 1979 geboren ist muss er erst mal 40x swipen. Ist lästig. Man kann im Kalender, die Jahreszahl auch manuell ändern, aber ob man das als Kunde sieht, bezweifle ich.
Dazu soll dieser Kalender dennoch da sein. Sieht einfach professioneller aus und wertert mein Projekt auf :D
Wenn du meinst in dieser Methode, dann das Event von flatpickr zu triggern funktioniert ledier nicht. dateStr hat leider nur den letzten Wert der mit Enter bestätigt wurde oder null. Oder gibt es eine andere Möglichkeit den Wert vom Input abzufragen? Musste ihn dann nur in die Variable birthdaze schreiben,damit die Validierung klappt.
Kann ich das nicht mit @onchange lösen? Müsste nur irgendwie an die eingebenen Zahlen kommen.