wake-up-neo.com

Konvertieren Sie als Benutzertypen mithilfe von Javascript in Großbuchstaben

Ich möchte Kleinbuchstaben in Großbuchstaben umwandeln, wenn der Benutzer Javascript verwendet. Anregungen sind willkommen.

Ich habe folgendes versucht:

$("#textbox").live('keypress', function (e) {
    if (e.which >= 97 && e.which <= 122) {
        var newKey = e.which - 32;
        // I have tried setting those
        e.keyCode = newKey;
        e.charCode = newKey;
    }
});
37
Butcher
$("#textbox").bind('keyup', function (e) {
    if (e.which >= 97 && e.which <= 122) {
        var newKey = e.which - 32;
        // I have tried setting those
        e.keyCode = newKey;
        e.charCode = newKey;
    }

    $("#textbox").val(($("#textbox").val()).toUpperCase());
});
24
Shaz
css

#textbox{text-transform:uppercase}
55
kennebec

Dies könnte eine Nizza Problemumgehung sein. Setzen Sie dies einfach in Ihr CSS:

input#textbox {
    text-transform: uppercase;
}

Wenn Sie die Daten in einem serverseitigen Skript (beispielsweise php) bereitstellen, können Sie immer Folgendes tun:

$upper_data = strtoupper($_POST['textbox']);
9
Andres SK

Hallo, dieser Code funktioniert gut bei Eingabe und Textbereich ohne Verzögerung oder Änderung der Kapitalisierung

$("#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

5
Yann86

probieren Sie dieses CSS-Skript aus, es funktioniert für mich.

<style>    
input{text-transform:uppercase};
</style>    

zur Information, was Sie sehen, vielleicht Großbuchstaben, aber es ist eigentlich immer noch das, was Sie eingeben, wenn Sie "Test" eingeben, das als "TEST" angezeigt wird, aber wenn Sie durch val () get als "Test" erscheinen.

wenn Sie möchten, dass es in Großbuchstaben angezeigt wird, fügen Sie bei Ereignissen wie unten beschrieben ein Skript hinzu, z. B. Unschärfe des Objekts oder elenent, wenn Sie dies benötigen.

$ (this) .val ($ (this) .val (). toUpperCase ());

Und wenn Sie für ein bestimmtes Objekt verwenden möchten, fügen Sie ein zusätzliches Skript hinzu, wie es jetzt verwendet wurde

input[attr]{
text-transform:uppercase;
}

input[attr='value']{
text-transform:uppercase;
}
3
percayahati

Da Sie dies ebenfalls als jQuery-Frage markiert haben, finden Sie hier eine einfache (gut, ziemlich 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());
    }
});

Die Verwendung von Tastendruck verhindert den "Bounce" -Effekt, den keyup hat (keydown bewirkt auch, aber event.wird hier nicht direkt zwischen Groß- und Kleinschreibung unterschieden - die Überprüfung der Umschalttasten ist aufgrund der Feststelltaste unordentlich). Dies wirkt sich auch auf das eingegebene Zeichen aus, konvertiert es in Großbuchstaben und hängt es an den vorhandenen Wert an, anstatt es zuerst anzuhängen und dann in Großbuchstaben umzuwandeln, wie dies bei den meisten anderen Lösungen der Fall ist. Schließlich konvertiert es tatsächlich das Zeichen, anstatt einen Formatierungsstil wie CSS anzuwenden. All dies führt zu einer besseren Kontrolle, insbesondere in Situationen, in denen einige Zeichen in Großbuchstaben umgewandelt werden müssen und andere nicht, z. B. in Seriennummern oder dergleichen.

EDIT: (vier Jahre später)!

Ich war nie zufrieden damit, wie jQuery/javascript mit dem Ändern von Schlüsseln in Großbuchstaben umgeht, wenn sie eingegeben werden. Ich habe alle Vorschläge in diesem Beitrag beseitigt, und keiner von ihnen (zumindest meiner) funktioniert einwandfrei. Dies ist für mich irritierend, da es in den alten VB6-Tagen eine einfache Sache war, den KeyAscii-Charakter zu ändern, der an das KeyPress-Ereignis übergeben wurde. Wie auch immer, ganz zufällig habe ich eine Art "Black-Art" -Lösung gefunden, die, soweit ich sie getestet habe, einwandfrei funktioniert. Das bedeutet, dass es in Chrome funktioniert, die Cursorposition auf dem Text korrekt verarbeitet, das Fokusverhalten des Browsers (mit einigem Aufwand) nicht ändert und zuverlässig in Großbuchstaben geändert wird, ohne dass es zuerst zu kleinen Auffälligkeiten in Kleinbuchstaben kommt. Während die CSS-Lösung all dies auch tut, hat sie, wie andere bereits festgestellt haben, den Nachteil, dass sie die darunterliegenden Zeichen programmatisch in Großbuchstaben zwingen muss, wenn die eigentliche Zeichenfolge verwendet werden muss. Dies kann mühsam sein und kann daher nicht berücksichtigt werden nicht gut skalieren. Also dachte ich, ich könnte das aufschreiben, falls es jemand nützlich findet.

Diese Lösung hängt von Josh Bushs kleinem Code ab (180 Zeilen Code für diejenigen, die sich Sorgen machen, weil die Abhängigkeit aufgebläht ist) Masked Input Plugin von digitalbush , das absolut solide ist und sehr gut funktioniert. Wenn Sie event.which in einen anderen Wert ändern und anschließend die mask()-Methode aufrufen (geben Sie zuerst den Keypress-Handler und dann die Maske in Ihrem Code an), wird die Änderung beibehalten.

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 unterstützt nicht sehr viele Maskentypen nativ: Literale, Alpha, numerische und alphanumerische Werte. Wenn Sie eine Interpunktion wünschen oder was auch immer, müssen Sie Ihre eigene Rolle mit Regex verwenden. (Wenn Sie dies tun, müssen Sie bedenken, dass auf jeden Charakter ein und dieselbe Regex-Übereinstimmung angewendet wird, ohne die anderen Charaktere zu berücksichtigen, sodass Sie nichts Besonderes tun können.) In meinem speziellen Fall brauchte ich alle Großbuchstaben sowie Leerzeichen und Kommas. Der ? in der Maskenzeichenfolge bedeutet, dass die folgenden Zeichen optional sind, so dass dieses Zeichen bis zu 20 Zeichen enthält. Da ich keine Maske zum Anzeigen benötigte, verwendete ich eine leere Zeichenfolge für einen Platzhalter.

Das funktioniert einwandfrei, abgesehen von dem kleinen Problem: Wenn Sie die Art und Weise beibehalten möchten, in der der Browser den Text auswählt, wenn Sie in das Feld tippen, müssen Sie zusätzliche Arbeit erledigen. Ich musste den Maskencode hacken, um zu bekommen, was ich wollte.

Ich habe zuerst versucht, einfach den Text in einem Fokusereignishandler auszuwählen. Dies funktioniert normalerweise, wenn ich focus() von einem Keydown-Handler aus aufrufe. Es hat hier nicht funktioniert; Der Cursor wurde so an das Ende des Textes gesetzt, als würde er mit einem Mausklick dort klicken. Ich habe versucht, den Platzhalter in ein Leerzeichen zu ändern. Dies führte dazu, dass der Text mit genügend Leerzeichen aufgefüllt wurde, um das angegebene Limit auszufüllen, und das Ganze ausgewählt wurde. 

Ich habe einige der Techniken here ausprobiert, aber die beste von ihnen (dh die, die in diesem Fall tatsächlich funktioniert hat) wendet das Highlight erst dann an, wenn der Schlüssel hoch ist, was bedeutet, dass es eine Verzögerung gibt, wenn es passiert, und Es passiert überhaupt nicht, wenn Sie die Taste gedrückt halten, bis sie sich wiederholt, und loslassen, wenn der Fokus in der Box liegt.Also habe ich in den Maskencode gegraben. Wie sich herausstellt, verfügt das Plugin auch über einen Fokus-Ereignishandler, den es verwendet, um die Maskenanzeige (z. B. (___) ___-___-____ für ein Telefon) in der Box einzurichten, wenn Sie darauf fokussieren. Dies ist das Verhalten, das Sie die meiste Zeit möchten, aber nicht hier, da es den ausgewählten Text durch den ausgewählten Text ersetzt, der mit dem Teil des Maskenindikators verkettet ist, der noch nicht gefüllt wurde. Wenn Sie keinen Maskenindikator haben, wird die Auswahl des Textes in der Box ebenso aufgehoben, als würden Sie den Textwert der Box programmgesteuert zuweisen.

Ich beschloss, den Maskencode ein bisschen zu hacken. Ich habe zuerst versucht, den gesamten Fokus-Ereignishandler zu kommentieren, der dazu führte, dass die Eingabemaske nicht in anderen Feldern angezeigt wurde, in denen ich sie wollte. Also fand ich eine weniger invasive Alternative. Ich habe das geändert (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) {

focus()-Methode verwenden, um sich auf das Textfeld zu konzentrieren (z. B. um den Benutzer der Dateneingabe vor der Neigung des Browsers zu schützen, zu Teilen zu wechseln, die bei Verwendung der Tabulatortaste unbekannt sind), müssen Sie anrufen die select()-Methode im Fokus-Ereignishandler, um den Text richtig hervorzuheben (keybdFocus ist ein Flag, das ich beim Aufruf des focus()-Ereignisses von einem keydown-Handler gesetzt habe, um einen von der Maus erzeugten Fokus zu unterscheiden):.

$('#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(); } });

  1. Ändern Sie die Codezeile im Fokus-Handler des Plugins.
  2. Richten Sie ggf. eine Maskendefinition ein, um die gewünschten Zeichen zu behandeln.
  3. Verwenden Sie in Ihrem Keypress-Ereignishandler Ihre Lieblingstechnik, um die Zahl in Großbuchstaben zu ändern. (Wichtig: Der Aufruf des Handlers muss vorangestellt werden Der Aufruf der mask()-Methode in Ihrem Code. Die Maske wertet e.which aus, um festzustellen, ob das Kandidatenzeichen in die Maske passt, und offensichtlich den Handler und den Maskencode werden in der Reihenfolge ausgelöst, in der sie angegeben sind.).
  4. Setzen Sie den Platzhalterwert auf '', wenn Sie die mask()-Methode aufrufen. 
  5. Wenn Sie mit einem Fokus auf das Eingabefeld geklickt haben, rufen Sie die Methode select() in Ihrem Fokus-Ereignishandler auf.
  6. Wenn Sie nur Zeichen in Großbuchstaben im Kontext eines typischen maskierten Bearbeitungsfelds erzwingen möchten, können Sie die Schritte 2 und 4 weglassen. So bin ich in erster Linie darauf eingegangen.

Of course, if you just want to force characters to uppercase in the context of a typical masked edit box, you can omit steps 2 and 4. That's how I fell into this in the first place.

1
BobRodes
$(document).ready(function () {
        $("#textbox").keyup( function (e) {
            var str = $(this).val();
            $("#textbox").val(str.toUpperCase());
});
});
1
T rakesh

Ich weiß, ich bin ziemlich spät auf der Party, aber ich möchte Folgendes 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 diese Vorteile:

  • Behält die Großschreibung des Platzhalters bei
  • Aktiviert die Eingabe sofort (beim Keydown)
  • Bewegt den Cursor nicht
  • Aktiviert den Wert der Eingabe, wenn diese bereits ausgefüllt ist

JS Fiddle hier

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)" />

Bearbeiten:

Der einfachste Weg ist die Verwendung von css:

#txtId {text-transform:uppercase}
1
Vishrant

Dies ist eine von mir entwickelte Lösung, die auch die Probleme vermeidet, bei denen Platzhalter in Großbuchstaben umgewandelt werden, und die Cursorposition nicht durcheinanderbringen.

Achtung: ändert nicht den "Wert" des Feldes, sondern nur die Anzeige. Siehe dazu hier: Aktualisieren eines Eingabewerts ohne Verlust der Cursorposition

$(function() {
    $("[data-uppercase='1']").on('keypress', function (e) {
        var $this = $(this);
        var placeholder = $this.attr('placeholder');
        if(placeholder && placeholder.length > 0) {
            this["_placeholder"] = placeholder;
            $this.attr('placeholder', '');
        }
        $this.css('text-transform', 'uppercase');
    }).on('keyup blur', function () {
        var $this = $(this);
        if ($this.val().length < 1) {
            $this.css("text-transform", "");
            $this.attr("placeholder", this["_placeholder"]);
            this["_placeholder"] = undefined;
        }
    });
});

Fügen Sie dann dem HTML-Element ein Daten-Großbuchstaben-Attribut hinzu:

<input type="text" data-uppercase="1" />

Arbeitete in Chrome, Firefox und IE9 +.

Geige: https://jsfiddle.net/GarryPas/ptez7q0q/3/

0
garryp