Wie setzt man das Textfeld automatisch auf Großbuchstaben?

Ich verwende das folgende Stilattribut, um die Benutzereingabe auf Großbuchstaben zu setzen. Wenn der Benutzer beispielsweise mit der Eingabe in das Textfeld beginnt railway, sollte diese in Großbuchstaben 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="../images/tickmark.gif" border="0" style='text-transform:uppercase'/>

Mit diesem Attribut erhalte ich jedoch nicht die gewünschte Ausgabe.

Sie haben das styleAttribut <img>anstelle des Tags auf das Tag gesetzt <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 Umwandlung rein visuell ist und den in POST gesendeten Text nicht ändert.

Ich denke, die robusteste Lösung, die sicherstellt, dass sie in Großbuchstaben veröffentlicht wird, ist die Inline-Verwendung der Oninput-Methode wie folgt:

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

BEARBEITEN

Einige Leute haben sich beschwert, dass der Cursor beim Bearbeiten des Werts zum Ende springt, daher 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 dem text-transformation:uppercaseStyling senden beim Senden keine Daten in Großbuchstaben an den Server - was Sie vielleicht erwarten. Sie können stattdessen so etwas tun:

Verwenden Sie für Ihre HTML-Eingabe onkeydown:

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

In Ihrem JavaScript:

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

Wenn die upperCaseF()Funktion bei jedem Tastendruck gedrückt wird, wird der Wert der Eingabe in Großbuchstaben umgewandelt.

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

Das Problem mit der ersten Antwort ist, dass der Platzhalter auch in Großbuchstaben geschrieben wird. Verwenden Sie die folgende Lösung, wenn NUR die Eingabe in Großbuchstaben erfolgen soll.

Um nur ein nicht leeres Eingabeelement auszuwählen, fügen Sie dem Element das erforderliche Attribut hinzu:

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

Verwenden Sie nun zur Auswahl das :validPseudoelement:

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

Auf diese Weise werden nur eingegebene Zeichen in Großbuchstaben geschrieben.

Versuchen

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

Anstelle von Bild setzen Sie ein Style-Tag auf die Eingabe, da Sie auf die Eingabe und nicht auf das Bild schreiben

Stellen Sie den folgenden Stil ein, um alle Textfelder in Großbuchstaben zu setzen

input {text-transform: uppercase;}

Das Problem mit CSS Styling ist, dass die Daten nicht geändert werden. Wenn Sie keine JS-Funktion benötigen, versuchen Sie ...

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

Allein wird das Feld von Keyup profitieren, daher ist es möglicherweise wünschenswert, dies mit den style='text-transform:uppercase'anderen vorgeschlagenen zu kombinieren .

Durch die Verwendung von CSS text-transform: uppercasewird die tatsächliche Eingabe nicht geändert, sondern nur das Erscheinungsbild. Wenn Sie die Eingabedaten an einen Server senden, werden diese immer noch in Kleinbuchstaben geschrieben oder wie auch immer Sie sie eingegeben haben. Um den Eingabewert tatsächlich zu transformieren, 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(), um inputWert in Großbuchstaben umzuwandeln . Es funktioniert einwandfrei, bis Sie das, was Sie eingegeben haben, bearbeiten müssen, z. B. wenn Sie ABCXYZ eingegeben haben und jetzt versuchen, es in ABCLMNXYZ zu ändern, wird es zu ABCLXYZMN, da der Cursor nach jeder Eingabe zum 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, kann es vorkommen, dass der Text während der Eingabe von Klein- zu Großbuchstaben springt. Wenn Sie dies stört, ist dies die Zeit, CSS zu verwenden, input: {text-transform: uppercase;}auf die CSS-Datei anzuwenden und alles wird gut.

Dies zeigt sowohl die Eingabe in Großbuchstaben als auch die Eingabedaten per Post in Großbuchstaben an.

HTML

<input type="text" id="someInput">

JavaScript

var someInput = document.querySelector('#someInput');
someInput.addEventListener('input', function () {
    someInput.value = someInput.value.toUpperCase();
});

Wie niemand es vorgeschlagen hat:

Wenn Sie die CSS-Lösung mit Platzhaltern in Kleinbuchstaben verwenden möchten, müssen Sie die Platzhalter nur separat formatieren. Teilen Sie die beiden Platzhalterstile aus Gründen der IE-Kompatibilität auf.

input {
    text-transform: uppercase;
}
input:-ms-input-placeholder {
    text-transform: none;
}
input::placeholder {
    text-transform: none;
}

The below input has lowercase characters, but all typed characters are CSS-uppercased :<br/>
<input type="text" placeholder="ex : ABC" />

Versuchen Sie es mit der folgenden Lösung. Dies ist auch dann sinnvoll, wenn ein Benutzer beim ersten Index nur Leerzeichen in das Eingabefeld eingibt.

document.getElementById('capitalizeInput').addEventListener("keyup",   () => {
  var inputValue = document.getElementById('capitalizeInput')['value']; 
  if (inputValue[0] === ' ') {
      inputValue = '';
    } else if (inputValue) {
      inputValue = inputValue[0].toUpperCase() + inputValue.slice(1);
    }
document.getElementById('capitalizeInput')['value'] = inputValue;
});

<input type="text" id="capitalizeInput" autocomplete="off" />

<script type="text/javascript">
    function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}
</script>

<input type="text" required="" name="partno" class="form-control" placeholder="Enter a Part No*" onkeydown="upperCaseF(this)">