Winkel: Wie man Großbuchstaben in einem Eingabefeld erzwingt

Lesezeit: 4 Minuten

Benutzeravatar von Nobady
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:

<input type="text" id="code" #code class="form-control" formControlName="code" maxlength="4"
                 (input)="code.value=$event.target.value.toUpperCase()">

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

Benutzeravatar von DForsyth
DForsyth

Wenn Sie mit arbeiten ngModelkönnen Sie verwenden ngModelChange um es auf diese Weise mit JavaScript zu tun .ToUpperCase().

<input [ngModel]="person.Name" (ngModelChange)="person.Name = $event.toUpperCase()">

Basierend auf der Antwort von @Ali Heikal sollte es lauten:

<input #code formControlName="code" (input)="code.value = code.value.toUpperCase()" type="text">

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

Benutzeravatar von Sampaguita
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.

(keyup)="form.patchValue({name: $event.target.value.toUpperCase()})"

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.

<input type="text" pattern="[A-Z]*" name="example" />

  • 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

Benutzeravatar von movaction.com
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:

@Directive({
  selector: 'input[toUppercase]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => UpperCaseInputDirective),
    },
  ],
})
export class UpperCaseInputDirective extends DefaultValueAccessor {
  @HostListener('input', ['$event']) input($event: InputEvent) {
    const target = $event.target as HTMLInputElement;
    const start = target.selectionStart;

    target.value = target.value.toUpperCase();
    target.setSelectionRange(start, start);

    this.onChange(target.value);
  }

  constructor(renderer: Renderer2, elementRef: ElementRef) {
    super(renderer, elementRef, false);
  }
}

Verwenden Sie die Direktive wie folgt für die Eingabe:

<input name="myTdfInput" type="text" [(ngModel)]="value" toUppercase>

Die Lösung funktioniert sowohl in reaktiven Formularen als auch in vorlagengesteuerten Formularen.

Sehen Sie sich die funktionierende Demo auf Stackblitz an: https://stackblitz.com/edit/angular-input-field-to-accept-only-numbers-czivy3?file=src/app/to-uppercase.directive.ts

Credits für die Lösung gehen an: https://twitter.com/BartBurgov (Siehe seinen Tweet hier: https://twitter.com/BartBurgov/status/1582394428748009477?s=20&t=RiefRcZ1B8IF42wp2rWzaQ)

1434170cookie-checkWinkel: Wie man Großbuchstaben in einem Eingabefeld erzwingt

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy