CSS text-transform: großschreibung;kapitalize bei allen Großbuchstaben

Question

Hier ist mein HTML:

kleine Großbuchstaben & 
GROßBUCHSTABEN

Hier ist mein CSS:

.link {text-transform: capitalize;}

Das Ergebnis ist:

Kleine Großbuchstaben & GROßBUCHSTABEN

Und ich möchte das Ergebnis sein:

Kleine Großbuchstaben & Alle Großbuchstaben

Irgendwelche Ideen?

Answer 1

Nachdem ich viel recherchiert habe, habe ich eine jQuery-Funktion/Ausdruck gefunden, um den Text nur im ersten Buchstaben in Großbuchstaben zu ändern. Ich habe diesen Code entsprechend angepasst, um ihn für Eingabefelder nutzbar zu machen. Wenn Sie etwas im Eingabefeld schreiben und dann zu einem anderen Feld oder Element wechseln, wird der Text dieses Feldes nur mit Großschreibung des 1. Buchstabens geändert. Egal, ob der Benutzer den Text komplett in Kleinbuchstaben oder Großbuchstaben schreibt:

Folgen Sie diesem Code:

Schritt 1: Rufen Sie die jQuery-Bibliothek im HTML-Kopf auf:

Schritt 2: Schreiben Sie den Code zum Ändern des Textes von Eingabefeldern:

$(document).ready(function(){
$("#edit-submitted-first-name,#edit-submitted-last-name,#edit-submitted-company-name, #edit-submitted-city").focusout(function(){
var str=$(this).val();
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});
$(this).val(str);
 });});

Schritt 3: Erstellen Sie HTML-Eingabefelder mit denselben IDs, die Sie im jQuery-Code verwenden, wie z.B.:

Die ID dieses Eingabefeldes lautet: edit-submitted-first-name (Sie wird im jQuery-Code im Schritt 2 verwendet)

**Ergebnis: Stellen Sie sicher, dass der Text sich ändert, nachdem Sie den Fokus von diesem Eingabefeld auf ein anderes Element verschoben haben. Denn wir verwenden hier das Fokusverlassen-Ereignis von jQuery. Das Ergebnis sollte folgendermaßen aussehen: Benutzer gibt ein: "danke" und es ändert sich in "Danke". **

Viel Glück

Answer 2

Wenn Sie jQuery verwenden, ist dies eine Möglichkeit, es zu tun:

$('.link').each(function() {
    $(this).css('text-transform','capitalize').text($(this).text().toLowerCase());
});

Hier ist eine leichter lesbare Version, die dasselbe tut:

//Alle Elemente im jQuery-Objekt durchlaufen
$('.link').each(function() {

    //Text aus dem Element holen und in Kleinbuchstaben umwandeln
    var string = $(this).text().toLowerCase();

    //Elementtext auf den neuen Kleinbuchstabenstring setzen
    $(this).text(string);

    //css auf Großbuchstaben setzen
    $(this).css('text-transform','capitalize');
});

Demo

Answer 3

Die PHP-Lösung, im Backend:

$string = 'GROßBUCHSTABEN';
$kleinbuchstaben = strtolower($string);
echo ucwords($kleinbuchstaben);

Answer 4

Ich weiß, dass dies eine späte Antwort ist, aber wenn Sie die Leistung verschiedener Lösungen vergleichen möchten, habe ich ein jsPerf erstellt.

Regex-Lösungen sind auf jeden Fall am schnellsten.

Hier ist das jsPerf: https://jsperf.com/capitalize-jwaz

Es gibt 2 Regex-Lösungen.

Die erste verwendet /\b[a-z]/g. Wortgrenze wird Wörter wie Nichtoffenlegung in Nichtoffenlegung umwandeln.

Wenn Sie nur Buchstaben großschreiben möchten, die von einem Leerzeichen begleitet werden, verwenden Sie den zweiten Regex

/(^[a-z]|\s[a-z])/g

Answer 5

Alles falsch es existiert--> font-variant: small-caps;

text-transform: capitalize; nur der erste Buchstabe groß