webentwicklung-frage-antwort-db.com.de

Wie kann man Kleinbuchstaben mit dem Ereignis 'keyup' in Großbuchstaben umwandeln?

Mein Ziel ist es, das jQuery-Ereignis .keyup () zu verwenden, um eingegebene Kleinbuchstaben in Großbuchstaben umzuwandeln.

Wie kann ich das erreichen?

javascriptjquery
49
Jennifer Anthony

Normales Javascript:

var input = document.getElementById('inputID');

input.onkeyup = function(){
    this.value = this.value.toUpperCase();
}

Javascript mit jQuery:

$('#inputID').keyup(function(){
    this.value = this.value.toUpperCase();
});
92
Neal

Das einzige Problem bei der fliegenden Änderung der Benutzereingaben ist, wie unangenehm es für den Endbenutzer aussehen kann.

Sie sollten stattdessen den folgenden CSS-Stil auf das Eingabefeld anwenden:

text-transform: uppercase;

Auf diese Weise erscheint der eingegebene Text immer in Großbuchstaben. Der einzige Nachteil ist, dass es sich um eine rein visuelle Änderung handelt - der Wert des Eingabesteuerelements (im Code dahinter betrachtet) behält den Fall bei, in dem er ursprünglich eingegeben wurde.

Zwischendurch einfach umgehen, erzwingen Sie die Eingabe val () .toUpperCase (); dann hast du das Beste aus beiden Welten.

30
Conan
$(document).ready(function()
{
    $('#yourtext').keyup(function()
    {
        $(this).val($(this).val().toUpperCase());
    });
});

<textarea id="yourtext" rows="5" cols="20"></textarea>
4
JConstantine

Angenommen, Ihr HTML-Code lautet:

<input type="text" id="txtMyText" />

dann sollte die jquery sein:

$('#txtMyText').keyup(function() {
  this.value = this.value.toUpperCase();
});
4
Ariful Islam

Da Platzhaltertext immer häufiger unterstützt wird, kann dieses Update relevant sein.

Mein Problem bei den anderen Antworten ist, dass das Anwenden von text-transform: uppercase css auch den Platzhaltertext in Großbuchstaben schreibt, den wir nicht wollten.

Um dies zu umgehen, war es ein wenig knifflig, aber den Nettoeffekt wert.

  1. Erstellen Sie die Textklasse in Großbuchstaben.

    .text-uppercase {
    text-transform:uppercase;
}

  2. Binden Sie an das keydownevent.

    Das Binden an das Keydown-Ereignis war wichtig, damit die Klasse hinzugefügt wird, bevor der Charakter sichtbar ist. Beim Binden an Tastendruck oder Tastenkombination wurde das kurze Flackern des Kleinbuchstaben bewirkt.

    $('input').on('keydown', function(e)
{
    // Visually Friendly Auto-Uppercase
    var $this = $(this);

    // 1. Length of 1, hitting backspace, remove class.
    if ($this.val().length == 1 && e.which == 8)
    {
        $this.removeClass('text-uppercase');
    }

    // 2. Length of 0, hitting character, add class.
    if ($this.val().length == 0 && e.which >= 65 && e.which <= 90)
    {
        $this.addClass('text-uppercase');
    }
});

  3. Beim Senden an den Server in Großbuchstaben umwandeln.

    var myValue = this.value.toUpperCase();

YMMV können Sie feststellen, dass das Ausschneiden von Text oder das Löschen von Text mit der Löschtaste die Klasse möglicherweise nicht entfernen. Sie können den Keydown ändern, um auch das Löschzeichen zu berücksichtigen.

Wenn Sie nur über ein Zeichen verfügen und sich Ihre aktuelle Cursorposition auf Position 0 befindet, wird durch Drücken der Rücktaste die Textumwandlungsklasse entfernt. Da sich die Cursorposition jedoch auf Position 0 befindet, wird das einzelne Zeichen nicht gelöscht.

Dies würde etwas mehr Arbeit erfordern, um auch die aktuelle Zeichenposition zu überprüfen und festzustellen, ob die Lösch- oder Rücktaste das verbleibende einzige Zeichen tatsächlich löscht.

Obwohl es den Aufwand wert war, dies für unseren häufigsten Anwendungsfall scheinbar und optisch ansprechend zu gestalten, war es nicht nötig, darüber hinauszugehen. :)

3
Dustin Graham

Die obigen Antworten sind ziemlich gut, ich wollte nur eine kurze Form dafür hinzufügen

 <input type="text" name="input_text"  onKeyUP="this.value = this.value.toUpperCase();">
2
mokNathal

jQuery:

var inputs = $('#foo');

inputs.each(function(){
          this.style.textTransform = 'uppercase';
       })
       .keyup(function(){
          this.value = this.value.toUpperCase();
       });
  1. Setzen Sie den Stil der Eingabe auf Großbuchstaben (damit der Benutzer die Änderung nicht sieht).
  2. Den Wert automatisch anpassen (damit der Benutzer die Umschalttaste nicht halten oder die Feststelltaste verwenden muss)
2
vol7ron

Ich benutze diesen Code erfolgreich, um Großbuchstaben zu ändern 

$(document).ready(function(){
$('#kode').keyup(function()
{
    $(this).val($(this).val().toUpperCase());
});
});
</script>

in Ihrem HTML-Tag Bootstraps 

<div class="form-group">
                            <label class="control-label col-md-3">Kode</label>
                            <div class="col-md-9 col-sm-9 col-xs-12">
                                <input name="kode" placeholder="Kode matakul" id="kode" class="form-control col-md-7 col-xs-12" type="text" required="required" maxlength="15">
                                <span class="fa fa-user form-control-feedback right" aria-hidden="true"></span>
                            </div>
                        </div>
0
Endang Taryana

Das hat bei mir funktioniert 

jQuery(document).ready(function(){ 
        jQuery('input').keyup(function() {
            this.value = this.value.toLocaleUpperCase();
        });
        jQuery('textarea').keyup(function() {
            this.value = this.value.toLocaleUpperCase();
        });
 });
0
prem