In Großbuchstaben konvertieren als Benutzertypen mit Javascript

css

#textbox{text-transform:uppercase}

InformationsquelleAutor der Antwort kennebec

Hallo dieser code funktioniert auf input-und textarea-ohne Verzögerung oder groß - /Kleinschreibung ändern

$("#input").on('input', function(evt) {
              var input = $(this);
              var start = input[0].selectionStart;
              $(this).val(function (_, val) {
                return val.toUpperCase();
              });
              input[0].selectionStart = input[0].selectionEnd = start;
            });

mix aus https://stackoverflow.com/a/7944108/1272540 und https://stackoverflow.com/a/13155583/1272540

jsFiddle

InformationsquelleAutor der Antwort Yann86

function changeToUpperCase(event,obj) {
    charValue = (document.all) ? event.keyCode : event.which;
    if (charValue!="8" && charValue!="0" && charValue != "27"){
        obj.value += String.fromCharCode(charValue).toUpperCase();
        return false;
    }else{
        return true;
    }
}

<input id="txtId" type="text" onkeypress="return changeToUpperCase(event,this)" />

Edit:

Den meisten einfachste Weg ist durch die Verwendung von css:

#txtId {text-transform:uppercase}

InformationsquelleAutor der Antwort Vishrant

Da Sie tagged dies als jQuery-Frage, wie auch, ist hier eine einfache (naja, relativ einfache) jQuery-Lösung:

$('#text_statute_section').on('keypress', function(event) {
    if(null !== String.fromCharCode(event.which).match(/[a-z]/g)) {
        event.preventDefault();
        $(this).val($(this).val() + String.fromCharCode(event.which).toUpperCase());
    }
});

Mithilfe der Tastendruck-verhindert, dass die "bounce" - Effekt, keyup hat (keydown auch nicht, aber event.die unterscheidet nicht direkt zwischen groß-und Kleinschreibung hier--shift-Taste überprüfen unordentlich ist wegen caps-lock). Auch diese arbeitet auf der input-Charakter, wandelt ihn in Großbuchstaben um und fügt es zu dem bestehenden Wert, sondern als erste Anhängen und dann konvertieren die ganze Sache zu groß-wie die meisten anderen Lösungen, die ich gesehen habe zu tun. Schließlich ist es tatsächlich konvertiert die Zeichen, anstatt die Anwendung einer Formatierung Stil, um ihn, wie CSS funktioniert. All dies ermöglicht bessere Kontrolle, besonders in Situationen, in denen einige Zeichen müssen gezwungen werden, um die groß-und einige nicht, wie Seriennummern oder dergleichen.

EDIT: (vier Jahre später)!

Hab ich nie zufrieden mit, wie jQuery/javascript Griffe ändern von Schlüsseln in Großbuchstaben, wie Sie eingegeben werden. Ich habe über alle Vorschläge in diesem Beitrag, und keiner von Ihnen (zumindest alle von mir) Recht problemlos funktionieren. Das ist irritierend für mich, da war es eine einfache Sache, die in der alten VB6-Tage ändern Sie den KeyAscii-Zeichen, die übergeben wurde auf das KeyPress-Ereignis. Trotzdem, ganz zufällig, fand ich dann eine Art "black art" - Lösung, die funktioniert einwandfrei soweit ich es getestet haben. Was bedeutet, es funktioniert in Chrome, es richtig verarbeitet alle cursor-position auf den text, es (mit etwas Arbeit) nicht ändern Sie die browser-Schwerpunkt Verhalten, und es zuverlässig Veränderungen in Großbuchstaben ohne jede Art von nervös, zeigt klein-ersten. Während die CSS-Lösung auch tut alle diese, wie andere beobachtet haben, es hat den Nachteil, dass programmgesteuert Kraft, die zugrunde liegenden Zeichen in Großbuchstaben wenn Sie Sie brauchen, die tatsächliche Zeichenfolge, mit zu arbeiten, das kann ein Streit zu verfolgen und daher nicht gut zu skalieren. So, dachte ich, könnte ich dies Schreibe, im Falle, jemand findet es nützlich.

Dieser Lösung hängt nicht von Josh Bush ' s little (180 Zeilen code, für diejenigen, die besorgt über die Abhängigkeit aufblasen) Masked Input Plugin von digitalbushdie ist solide und tut, was es tut sehr gut. Wenn Sie ändern event.which zu einem anderen Wert, und nennen Sie die mask() Methode danach (geben Sie das keypress-handler erste und die zweite Maske in Ihrem code), wird die änderung beibehalten wird.

Hier ist ein bisschen code:

$.mask.definitions['b'] = '[A-Z, ]';

$('#txtMyInput').on('keypress', function(e) {
    e.which =     String.fromCharCode(e.which).toUpperCase().charCodeAt(0);
})
.mask('b?bbbbbbbbbbbbbbbbbbb', { placeholder: '' })

Maske nicht unterstützt sehr viele maskentypen nativ: Literale, die alpha -, numerische und alphanumerische sind. Wenn Sie möchten, Satzzeichen oder was auch immer Sie zu Rollen Sie Ihre eigenen Verwendung von regex. (Wenn Sie dies tun, werden Sie brauchen, um Bedenken Sie, dass die gleiche regex-match angewendet wird jedes Zeichen nacheinander, ohne Rücksicht auf die anderen Zeichen, so dass Sie nicht tun können, etwas Phantasie). In meinem speziellen Fall, ich brauchte Großbuchstaben plus Leerzeichen und Kommas. Die ? in der Maske Zeichenfolge bedeutet, dass die folgenden Zeichen sind optional, so das man gibt mir bis zu 20 Zeichen. Seit ich didn ' T brauchen eine Maske zu zeigen, habe ich ein leeren string für den Platzhalter.

Dass alles funktioniert perfekt, außer für ein kleines problem: wenn Sie möchten, um den Weg der browser wählt den text bei der Navigation mit der Tabulatortaste in das Feld ein, Sie haben, um zusätzliche Arbeit zu tun. Ich aufgewickelt mit hack die Maske-code, um zu bekommen, was ich wollte.

Zuerst habe ich versucht einfach die Auswahl der text in einem focus-Ereignis-handler, die normalerweise funktioniert, wenn ich rufe focus() aus ein keydown-handler. Es hat nicht funktioniert; der cursor nur bekam, um das Ende des Textes, als wäre es auf einem Mausklick. Ich habe versucht, die änderung der Platzhalter für ein Leerzeichen. Dies führte in padding den text mit genug Räume zu füllen, bis die genannte Grenze, und die Auswahl der ganzen Sache.

Ich habe versucht, einige der Techniken, die hieraber die besten von Ihnen (d.h. die, tatsächlich arbeiteten in diesem Fall) noch nicht für das highlight, bis Taste up, was bedeutet, es gibt eine Verzögerung, wenn es geschieht, und es geschieht nicht, wenn Sie eine Taste gedrückt halten, bis es wiederholt passieren und gehen zu lassen, wenn der Fokus in das Feld ein.

Also grub ich in die Maske code. Wie es sich herausstellt, das plugin hat auch ein focus-Ereignis-handler, der es verwendet, um set-up die Maske Indikator (sagen wir (___) ___-___-____ für ein Handy) in die box, wenn Sie konzentrieren sich auf es. Dies ist das Verhalten, das Sie wollen die meisten der Zeit, aber nicht hier, denn es ersetzt den ausgewählten text mit dem ausgewählten text verkettet, um den Teil der Maske Indikator, der bisher nicht gefüllt doch. Wenn Sie nicht über eine Maske Indikator, dies hat den Effekt, deaktivieren Sie den text in der box genauso passieren würde, wenn Sie programmgesteuert zugeordnet, die text-Wert von der box.

Beschloss ich hack die Maske code ein wenig. Zuerst habe ich versucht zu kommentieren, den gesamten Fokus-event-handler, die hatte den Effekt nicht zeigt die Eingabemaske auf anderen Feldern, wo ich es wollte. Also, ich fand eine weniger invasive alternative. Ich änderte dies (derzeit jquery.maskedinput.js, Zeile 164):

}).on("focus.mask", function() {
    if (!input.prop("readonly") { 
        //etc.

:

}).on("focus.mask", function() {
    if (!input.prop("readonly") && settings.placeholder.length > 0) {

Diese Einstellung umgeht die Maske Kennzeichen, wenn Sie Ihren Platzhalter für eine leere saite, die es erlaubt, den browser-nativen Fokus-Verhalten stattfinden.

Eine weitere Sache: wenn Sie mit der focus() Methode, um den Fokus auf das Textfeld (zum Beispiel, zur Rettung der Daten Eintrag Benutzer aus der browser-Tendenz zu Wandern, zu teilen unbekannt bei der Nutzung der tab-Taste), müssen Sie rufen Sie die select() - Methode im Fokus-event-handler, um richtig zu markieren Sie den text (keybdFocus ist ein flag, das ich, wenn ich rufen Sie die focus() Ereignis aus einer keydown handler, zu unterscheiden von einer Maus-generated-Fokus):

$('#txtMyInput').on('keypress', function(e) {
    e.which = String.fromCharCode(e.which).toUpperCase().charCodeAt(0);
})
.mask('b?bbbbbbbbbbbbbbbbbbb', { placeholder: '' })
.focus(function() {
    if (kybdFocus) {
        kybdFocus = false;
        $(this).select();
    }
});

Zusammenfassung der Schritte:

1. Download Josh Bush ' s Masked Edit-Plugin.
2. Ändern Sie die Codezeile im plugin-Fokus-handler.
3. Einrichten einer Maske definition (wenn nötig) behandeln Sie die gewünschten Zeichen ein.
4. In Ihrem keypress-event-handler verwenden Sie Ihre bevorzugte Technik zu ändern.. e die um seine Großbuchstaben-Entsprechung. (Wichtig: der Aufruf der handler vorausgehen muss der Aufruf der mask() Methode in Ihrem code. Die Maske wertet e.die, um zu bestimmen, ob der Kandidaten-Charakter passt die Maske, und offenbar die handler und die Maske code ausgelöst werden, in der Reihenfolge, in der Sie angegeben sind.)
5. Setzen Sie den Platzhalter Wert auf '' beim Aufruf der mask() Methode.
6. Wenn Sie drücken Sie die Eingabe-Feld mit einem Schwerpunkt, rufen Sie die select() Methode in Ihren Fokus-event-handler.

Natürlich, wenn Sie nur wollen, zu zwingen Zeichen in Großbuchstaben im Kontext einer typischen masked edit-box, können Sie weglassen der Schritte 2 und 4. Das ist, wie ich mich in dieser in den ersten Platz.

InformationsquelleAutor der Antwort BobRodes

Ich weiß ich bin Recht spät zur party, aber ich würde gerne das hier anbieten:

(function ( $ ) {

  var displayUppercase = function ($element) {
    if ($element.val()) {
      $element.css('text-transform', 'uppercase');
    } else {
      $element.css('text-transform', 'none');
    }
  };

  $.fn.displayAsUppercase = function() {
    $(this).each(function() {
        var $element = $(this);
      displayUppercase($element);
      $element.on('input', function(){displayUppercase($element)});
    });
    return this;
    };

}( jQuery ));

Es hat die folgenden Vorteile:

• Hält die Platzhalter Kapitalisierung intakt
• Nutzt den Eingang sofort (auf Tastendruck)
• Nicht bewegen Sie den cursor
• Nutzt die Gunst der Wert der Eingabe, wenn es bereits

JS Fiddle hier

InformationsquelleAutor der Antwort Chris Hodges

$("#id").keyup(function() {
    $(this).val($(this).val().replace(/([a-z])/,function(){
        return $("#id").toUpperCase();
    }));
});

kleine Korrektur im obigen script, funktioniert dies nun perfekt.

InformationsquelleAutor der Antwort samrat chitta