Wie stellen Sie das Textfeld automatisch auf Großbuchstaben ein?

Ich verwende das folgende Stilattribut, um die Benutzereingabe auf Großbuchstaben zu setzen, damit der Benutzer beispielsweise mit der Eingabe in das Textfeld beginnt railwaydann sollte es in Großbuchstaben wie geändert werden RAILWAY ohne dass der Benutzer die Feststelltaste drücken muss.

Dies ist der Code, den ich für die Eingabe verwende:

<input type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="https://stackoverflow.com/questions/11100041/images/tickmark.gif" border="0" style="text-transform:uppercase"/>

Aber ich erhalte nicht die gewünschte Ausgabe, wenn ich dieses Attribut verwende.

Sie haben die style Attribut auf der <img> Tag statt der <input>.

Es ist auch keine gute Idee, die Leerzeichen zwischen dem Attributnamen und dem Wert zu haben …

<input type="text" class="normal" 
       name="Name" size="20" maxlength="20" 
       style="text-transform:uppercase" /> 
<img src="../images/tickmark.gif" border="0" />

Bitte beachten Sie, dass diese Transformation ist rein visuell und ändert nicht den Text, der in POST gesendet wird.

HINWEIS: Wenn Sie die einstellen möchten tatsächlicher Eingabewert in Großbuchstaben umzuwandeln und sicherzustellen, dass der vom Formular übermittelte Text in Großbuchstaben geschrieben ist, können Sie den folgenden Code verwenden:

<input oninput="this.value = this.value.toUpperCase()" />

Ich denke, die robusteste Lösung, die sicherstellt, dass es in Großbuchstaben gepostet wird, ist die Verwendung der oninput-Methode inline wie:

<input oninput="this.value = this.value.toUpperCase()" />

BEARBEITEN

Einige Leute haben sich darüber beschwert, dass der Cursor beim Bearbeiten des Werts ans Ende springt, also sollte diese leicht erweiterte Version das beheben

<input oninput="let p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p, p);" />

Die Antworten mit der text-transformation:uppercase styling sendet beim Senden keine Daten in Großbuchstaben an den Server – was Sie vielleicht erwarten. Du kannst stattdessen so etwas tun:

Verwenden Sie für Ihren Eingabe-HTML onkeydown:

<input name="yourInput" onkeydown="upperCaseF(this)"/>

In Ihrem JavaScript:

function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}

Mit upperCaseF() Funktion Bei jedem Tastendruck wird der Wert der Eingabe in Großbuchstaben umgewandelt.

Ich habe auch eine Verzögerung von 1 ms hinzugefügt, damit der Funktionscodeblock nach dem Keydown-Ereignis ausgelöst wird.

AKTUALISIEREN

Auf Empfehlung von Dinei können Sie oninput event statt onkeydown verwenden und loswerden setTimeout.

Verwenden Sie für Ihren Eingabe-HTML oninput:

<input name="yourInput" oninput="this.value = this.value.toUpperCase()"/>

Das Problem bei der ersten Antwort ist, dass der Platzhalter ebenfalls in Großbuchstaben geschrieben wird. Falls Sie möchten, dass die Eingabe NUR in Großbuchstaben erfolgt, verwenden Sie die folgende Lösung.

Um nur nicht leere Eingabeelemente auszuwählen, setzen Sie das erforderliche Attribut auf das Element:

<input type="text" id="name-input" placeholder="Enter symbol" required="required" />

Um es jetzt auszuwählen, verwenden Sie die :valid Pseudoelement:

#name-input:valid { text-transform: uppercase; }

Auf diese Weise werden nur eingegebene Zeichen großgeschrieben.

Versuchen

<input type="text" class="normal" 
       style="text-transform:uppercase" 
       name="Name" size="20" maxlength="20"> 
 <img src="https://stackoverflow.com/questions/11100041/images/tickmark.gif" border="0"/>

Anstelle von image setzen Sie style tag auf input, da Sie auf Input und nicht auf image schreiben

Legen Sie den folgenden Stil fest, um alle Textfelder auf Großbuchstaben zu setzen

input {text-transform: uppercase;}

Verwendung von CSS text-transform: uppercase ändert nicht die eigentliche Eingabe, sondern nur ihr Aussehen. Wenn Sie die Eingabedaten an einen Server senden, werden sie immer noch in Kleinbuchstaben geschrieben oder wie auch immer Sie sie eingegeben haben. Um den Eingabewert tatsächlich umzuwandeln, müssen Sie den folgenden JavaScript-Code hinzufügen:

document.querySelector("input").addEventListener("input", function(event) {
  event.target.value = event.target.value.toLocaleUpperCase()
})

<input>

Hier verwende ich toLocaleUpperCase() umwandeln input Wert in Großbuchstaben. Es funktioniert gut, bis Sie Ihre Eingabe bearbeiten müssen, zB wenn Sie ABCXYZ eingegeben haben und jetzt versuchen, es in ABCLMNXYZ zu ändern, wird es zu ABCLXYZMN, weil der Cursor nach jeder Eingabe an das Ende springt.

Um dieses Springen des Cursors zu überwinden, müssen wir folgende Änderungen an unserer Funktion vornehmen:

document.querySelector("input").addEventListener("input", function(event) {
  var input = event.target;
  var start = input.selectionStart;
  var end = input.selectionEnd;
  input.value = input.value.toLocaleUpperCase();
  input.setSelectionRange(start, end);
})

<input>

Jetzt funktioniert alles wie erwartet, aber wenn Sie einen langsamen PC haben, sehen Sie möglicherweise, dass Text während der Eingabe von Kleinbuchstaben zu Großbuchstaben springt. Wenn Sie das ärgert, ist dies die Zeit, CSS zu verwenden, bewerben Sie sich input: {text-transform: uppercase;} in die CSS-Datei und alles wird gut.