Winkel: Wie man Großbuchstaben in einem Eingabefeld erzwingt
Lesezeit: 4 Minuten
Nobady
Ich arbeite mit Winkel (Typoskript) und habe ein Modellformular in HTML, in das der Benutzer ein Codefeld und ein Beschreibungsfeld einfügen muss.
Das Codefeld muss immer vom Benutzer eingegeben werden, immer in Großbuchstaben.
Ich habe diese Frage gefunden und befolgt: Wie man den Eingabewert in Winkel 2 in Großbuchstaben umwandelt (Wertübergabe an ngControl)
aber der letzte Buchstabe, den der Benutzer einfügt, bleibt jedoch Kleinbuchstaben. Die grundlegende Sache ist, dass die Datenbank immer in Großbuchstaben geschrieben wird (ich habe auch eine Grenze von 4 Zeichen gesetzt, die ordnungsgemäß funktioniert). Dies ist jetzt mein Code, aber wie oben geschrieben funktioniert es nicht richtig arbeiten:
hat jemand eine schnelle, funktionale und schnelle Lösung gefunden?
Danke!
Sie könnten das Ereignis onchange verwenden und alles in Großbuchstaben umwandeln.
– Mürrisch
21. Mai 2018 um 10:24 Uhr
Sie können einfach hinzufügen oninput="this.value = this.value.toUpperCase()" in deiner <input> Tag und es wird jede Eingabe in Ihrem Eingabefeld sofort in Großbuchstaben umwandeln.
Ja, ich hatte gerade diese Lösung gefunden und getestet, sie funktioniert einwandfrei! Danke euch allen!
– Nobady
21. Mai 2018 um 10:49 Uhr
(input)=”code.value=$event.target.value.toUpperCase()” funktioniert nicht richtig. Es schreibt alle Buchstaben außer dem letzten groß. @Ali danke für deine Lösung. Funktioniert einwandfrei.
– D_Edet
31. Juli 2020 um 8:53 Uhr
Aufmerksamkeit! Diese Lösung hat einen Nebeneffekt. Wenn Sie die Eingabe in der Mitte oder am Anfang ändern möchten, springt der Cursor beim Tippen an das Ende der Zeile
– Der schlechteste Coder aller Zeiten
24. Mai um 12:30 Uhr
DForsyth
Wenn Sie mit arbeiten ngModelkönnen Sie verwenden ngModelChange um es auf diese Weise mit JavaScript zu tun .ToUpperCase().
Oder verwenden .toLocaleUpperCase() im Bedarfsfall.
Wie von @D_Edet auf eine andere Antwort hingewiesen, wird dadurch der letzte Buchstabe nicht direkt auf dem Modell groß geschrieben, visuell wird alles groß geschrieben, aber wenn Sie den zugehörigen Formularwert überprüfen, wird dies nicht der Fall sein. Keyup-Ereignis mit form.patchValue funktioniert dank Sampaguita.
– le0diaz
30. September 2021 um 3:45 Uhr
Sampaguita
Das hat bei mir funktioniert. Ich habe gerade Keyup verwendet und wenn ein Benutzer ein Zeichen hinzufügt, wird es automatisch in Großbuchstaben konvertiert, nicht nur in der Benutzeroberfläche, sondern auch im Modell.
Sie können eine verwenden pattern -Attribut, um die zulässige Eingabe einzuschränken. Sie können den Benutzer auch unterstützen, indem Sie seine Eingabe in Großbuchstaben schreiben.
Basierend auf meinen Tests mit diesem Snippet schränkt das Muster die Eingabe nicht ein. In FF kennzeichnet es nur einen Fehler, indem es das Eingabefeld rot färbt. In Chrome scheint es keine Auswirkungen zu haben.
– JeffryHouser
6. September 2018 um 12:57 Uhr
Was ist mit dem Großbuchstaben des Anfangsbuchstabens, was das Muster ist?
– Ilia Tapia
11. Mai 2019 um 10:08 Uhr
moveaction.com
Ein bisschen spät, aber ich bin überrascht, die CSS-Alternative nicht zu sehen.
Fügen Sie im Eingabefeld hinzu:
.input-upper{
text-transform: uppercase;
}
Basierend auf meinen Tests mit diesem Snippet schränkt das Muster die Eingabe nicht ein. In FF kennzeichnet es nur einen Fehler, indem es das Eingabefeld rot färbt. In Chrome scheint es keine Auswirkungen zu haben.
– JeffryHouser
6. September 2018 um 12:57 Uhr
Was ist mit dem Großbuchstaben des Anfangsbuchstabens, was das Muster ist?
– Ilia Tapia
11. Mai 2019 um 10:08 Uhr
Sie könnten eine Angular-Direktive erstellen, die alle Benutzereingaben in Großbuchstaben umwandelt.
Die Richtlinie erstreckt sich DefaultValueAccessor:
Sie könnten das Ereignis onchange verwenden und alles in Großbuchstaben umwandeln.
– Mürrisch
21. Mai 2018 um 10:24 Uhr