Wie kann ich mit jQuery den ersten Buchstaben eines Textfelds groß schreiben, während der Benutzer dieses Feld noch bearbeitet?


71

Ich suche nach einem Beispiel für die Großschreibung des ersten Buchstabens einer Zeichenfolge, die in ein Textfeld eingegeben wird. Normalerweise wird dies auf das gesamte Feld durchgeführt mit einer Funktion, regex, OnBlur, OnChangeetc. Ich möchte den ersten Buchstaben profitieren , während der Benutzer noch Typisierung.

Wenn ich beispielsweise das Wort "cat" eingebe, sollte der Benutzer 'c' drücken, und bis er 'a' drückt, sollte das C im Feld groß geschrieben werden.

Ich denke, was ich will, könnte mit keyupoder möglich seinkeypress ich bin mir nicht sicher, wo ich anfangen soll.

Hat jemand ein Beispiel für mich?

Antworten:


101

Verwenden Sie einfach CSS.

.myclass 
{
    text-transform:capitalize;
}

34
Dies wird JEDES Wort großschreiben.
Kaleb Brasee

6
@Kaleb Der Wert "Großschreiben" aktiviert das erste Zeichen jedes Wortes. w3schools.com/Css/pr_text_text-transform.asp
Darrell Brogdon

4
Ja, das meine ich, das OP will nur das erste Wort des gesamten Feldes groß schreiben.
Kaleb Brasee

4
In Google Chrome können weiterhin ALLE GROSSBUCHSTABEN eingegeben werden. JS ist erforderlich, damit es auch in Satzfall konvertiert wird.
Aaron

25
Diese Großschreibung ändert nur die Visualisierung. Das Backend erhält die Eingabe so, wie sie eingegeben wurde. Dies kann zu unerwarteten Erscheinungen desselben Textes in Kleinbuchstaben führen.
Spajus

79

Dadurch wird einfach der erste Textbuchstabe umgewandelt:

yourtext.substr(0,1).toUpperCase()+yourtext.substr(1);


4
Einfach und süß. Hat mir in meinem Fall geholfen :)
Lahiru

5
Dies sollte die akzeptierte Antwort sein, da dies die Benutzereingabe tatsächlich ändert, wenn Sie sie als Eingabe für das Backend verwenden.
Ogier Schelvis

Die akzeptierte Antwort muss <tag> erstellen und .class hinzufügen. Dieser ist keine Notwendigkeit!
Alex

Dies sollte die akzeptierte Antwort sein; Die aktuell akzeptierte Antwort ist nur eine Problemumgehung.
Unheimlicher Bart

28

Ich habe das woanders beantwortet. Hier sind jedoch zwei Funktionen, die Sie möglicherweise beim Keyup-Ereignis aufrufen möchten.

Das erste Wort groß schreiben

  function ucfirst(str,force){
          str=force ? str.toLowerCase() : str;
          return str.replace(/(\b)([a-zA-Z])/,
                   function(firstLetter){
                      return   firstLetter.toUpperCase();
                   });
     }

Und um alle Wörter groß zu schreiben

function ucwords(str,force){
  str=force ? str.toLowerCase() : str;  
  return str.replace(/(\b)([a-zA-Z])/g,
           function(firstLetter){
              return   firstLetter.toUpperCase();
           });
}

Wie von @Darrell vorgeschlagen

$('input[type="text"]').keyup(function(evt){

      // force: true to lower case all letter except first
      var cp_value= ucfirst($(this).val(),true) ;

      // to capitalize all words  
      //var cp_value= ucwords($(this).val(),true) ;


      $(this).val(cp_value );

   });

Hoffe das ist hilfreich

Prost :)


2
Dies aktiviert den nächsten Buchstaben von ausländischen Zeichen wie polnisch ł ę ą usw. "małopolska" = "MałOpolska"
Ausgrabung

Sie sollten keinen regulären Ausdruck für ASCII-Zeichen verwenden, sondern immer den Großbuchstaben in Großbuchstaben schreiben.
justin.m.chase

Best Practice ist besser zu verwenden, .blur()da Benutzer sonst nicht Ctrl+ verwenden können A, um alle auszuwählen.
David Passmore

26
$('input[type="text"]').keyup(function(evt){
    var txt = $(this).val();


    // Regex taken from php.js (http://phpjs.org/functions/ucwords:569)
    $(this).val(txt.replace(/^(.)|\s(.)/g, function($1){ return $1.toUpperCase( ); }));
});

Zu Ihrer Information: Dieses Skript verhindert, dass Ihre Benutzer Cursortasten im Textfeld verwenden.
Ben Clark-Robinson

25

CSS-Lösung mit "Texttransformation: Großschreibung;" ist nicht gut, wenn Sie den Inhalt der Eingabe im Backend verwenden möchten. Sie erhalten weiterhin Daten wie sie sind. JavaScript löst dieses Problem.

Das JQuery-Plugin wurde aus einigen der zuvor genannten Techniken kombiniert und schreibt Wörter nach Bindestrichen groß, dh: "Tro Lo-Lo":

Fügen Sie Ihrem Skript hinzu:

jQuery.fn.capitalize = function() {
    $(this[0]).keyup(function(event) {
        var box = event.target;
        var txt = $(this).val();
        var stringStart = box.selectionStart;
        var stringEnd = box.selectionEnd;
        $(this).val(txt.replace(/^(.)|(\s|\-)(.)/g, function($word) {
            return $word.toUpperCase();
        }));
        box.setSelectionRange(stringStart , stringEnd);
    });

   return this;
}

Dann hängen Sie einfach groß () an einen beliebigen Selektor an:

$('#myform input').capitalize();

4
Ich denke, dies sollte die Antwort auf diese Frage sein, da die CSS-Lösung nur eine Darstellung ist.
Kann Celik

17

Ich habe den Code von @Spajus verwendet und ein erweitertes jQuery-Plugin geschrieben.

Ich habe diese vier jQuery-Funktionen geschrieben:

  • upperFirstAll() um ALLE Wörter in einem Eingabefeld groß zu schreiben
  • upperFirst() nur das ERSTE Wort groß schreiben
  • upperCase() um den Lochtext in Großbuchstaben umzuwandeln
  • lowerCase() um den Lochtext in Kleinbuchstaben umzuwandeln

Sie können sie wie jede andere jQuery-Funktion verwenden und verketten:
$('#firstname').upperFirstAll()

Mein komplettes jQuery Plugin:

(function ($) {
    $.fn.extend({

    // With every keystroke capitalize first letter of ALL words in the text
    upperFirstAll: function() {
        $(this).keyup(function(event) {
            var box = event.target;
            var txt = $(this).val();
            var start = box.selectionStart;
            var end = box.selectionEnd;

            $(this).val(txt.toLowerCase().replace(/^(.)|(\s|\-)(.)/g,
            function(c) {
                return c.toUpperCase();
            }));
            box.setSelectionRange(start, end);
        });
        return this;
    },

    // With every keystroke capitalize first letter of the FIRST word in the text
    upperFirst: function() {
        $(this).keyup(function(event) {
            var box = event.target;
            var txt = $(this).val();
            var start = box.selectionStart;
            var end = box.selectionEnd;

            $(this).val(txt.toLowerCase().replace(/^(.)/g,
            function(c) {
                return c.toUpperCase();
            }));
            box.setSelectionRange(start, end);
        });
        return this;
    },

    // Converts with every keystroke the hole text to lowercase
    lowerCase: function() {
        $(this).keyup(function(event) {
            var box = event.target;
            var txt = $(this).val();
            var start = box.selectionStart;
            var end = box.selectionEnd;

            $(this).val(txt.toLowerCase());
            box.setSelectionRange(start, end);
        });
        return this;
    },

    // Converts with every keystroke the hole text to uppercase
    upperCase: function() {
        $(this).keyup(function(event) {
            var box = event.target;
            var txt = $(this).val();
            var start = box.selectionStart;
            var end = box.selectionEnd;

            $(this).val(txt.toUpperCase());
            box.setSelectionRange(start, end);
        });
        return this;
    }

    });
}(jQuery));

Groetjes :)


10

Mein persönlicher Favorit bei der Verwendung von jQuery ist kurz und bündig:

function capitalize(word) {
   return $.camelCase("-" + word);
}

Es gibt ein jQuery-Plugin, das dies auch tut. Ich werde es nennen ... jCap.js

$.fn.extend($, { 
    capitalize: function() {
        return $.camelCase("-"+arguments[0]); 
    } 
});

Das sieht für mich gut aus ... viel besser als andere Antworten ... weil es mir ermöglicht, in vorhandenen Funktionen zu denken, die von einer bekannten Bibliothek namens jQuery bereitgestellt werden. Danke für den Anstoß.
Nawaz

Warum würden Sie meine Methode der einfachen Verwendung von CSS vorziehen? Nur neugierig. Was ist der Anwendungsfall?
Todd

2
Ich würde diesen Ansatz CSS vorziehen, da er die Zeichenfolgen tatsächlich großschreibt (dh auf Datenebene), anstatt nur großgeschriebenen Text zu rendern (dh auf Präsentationsebene). Auf Datenebene können wir viel mehr als nur Kapitalisierung tun. Daher ist es sinnvoll, dies (und all diese Dinge) auf Datenebene selbst (im Allgemeinen) zu tun.
Nawaz

Dies behandelt jedoch nicht mehrere Wörter. Siehe meine Version unten, die eine Modifikation von @Todd ist, aber die Anzahl der Wörter in der Zeichenfolge unterstützt.
Siwalikm

10
 $("#test").keyup(
     function () {
         this.value = this.value.substr(0, 1).toUpperCase() + this.value.substr(1).toLowerCase();
     }
 );

Die eleganteste Lösung, und die nützliche, wenn Sie Zeichenfolgenwerte groß schreiben müssen, damit CSS nicht anwendbar ist
Dalibor

7

Leichte Aktualisierung des obigen Codes, um das Verringern der Zeichenfolge zu erzwingen, bevor der erste Buchstabe groß geschrieben wird.

(Beide verwenden die Jquery-Syntax)

    function CapitaliseFirstLetter(elemId) {
        var txt = $("#" + elemId).val().toLowerCase();
        $("#" + elemId).val(txt.replace(/^(.)|\s(.)/g, function($1) {
        return $1.toUpperCase(); }));
        }

Zusätzlich eine Funktion zum Großschreiben der GANZEN Zeichenfolge:

    function CapitaliseAllText(elemId) {
         var txt = $("#" + elemId).val();
         $("#" + elemId).val(txt.toUpperCase());
         }

Syntax für das Klickereignis eines Textfelds:

    onClick="CapitaliseFirstLetter('myTextboxId'); return false"

4

Meine Entschuldigung. Die Syntax war ausgeschaltet, weil ich es eilig und schlampig hatte. Bitte schön...

     $('#tester').live("keyup", function (evt)
        {
            var txt = $(this).val();
            txt = txt.substring(0, 1).toUpperCase() + txt.substring(1);
            $(this).val(txt);
        });

Einfach aber funktioniert. Sie möchten dies auf jeden Fall allgemeiner und Plug-and-Playable machen. Dies ist nur, um eine andere Idee mit weniger Code anzubieten. Meine Philosophie beim Codieren ist es, es so allgemein wie möglich und mit so wenig Code wie möglich zu gestalten.

Hoffe das hilft. Viel Spaß beim Codieren! :) :)



4

Es ist sehr cool, dass Sie nur den ersten Buchstaben eines Eingabefelds groß schreiben können. Wenn jemand weiß, wie man groß schreibt Wie CSS-Texttransformation: großschreiben, bitte antworten.

$('input-field').keyup(function(event) { $(this).val(($(this).val().substr(0,1).toUpperCase())+($(this).val().substr(1))); });


2

Ein türkischer. Wenn jemand noch interessiert ist.

 $('input[type="text"]').keyup(function() {
    $(this).val($(this).val().replace(/^([a-zA-Z\s\ö\ç\ş\ı\i\ğ\ü\Ö\Ç\Ş\İ\Ğ\Ü])|\s+([a-zA-Z\s\ö\ç\ş\ı\i\ğ\ü\Ö\Ç\Ş\İ\Ğ\Ü])/g, function ($1) {
        if ($1 == "i")
            return "İ";
        else if ($1 == " i")
            return " İ";
        return $1.toUpperCase();
    }));
});

2

Dies wird Ihnen helfen, den ersten Buchstaben jedes Wortes in Großbuchstaben umzuwandeln

<script>
  /* convert First Letter UpperCase */
  $('#txtField').on('keyup', function (e) {
    var txt = $(this).val();
    $(this).val(txt.replace(/^(.)|\s(.)/g, function ($1) {
      return $1.toUpperCase( );
    }));
  });
</script>

Beispiel: Dies ist ein Titel-Fall-Satz -> Dies ist ein Titel-Fall-Satz


1

Mit Javascript können Sie verwenden:

yourtext.substr(0,1).toUpperCase()+yourtext.substr(1);

Wenn Sie Ihre Webseite zufällig mit PHP erstellen, können Sie auch Folgendes verwenden:

<?=ucfirst($your_text)?>

1

Ich verwende sowohl CSS- als auch jQuery-Lösungen, um dies zu erreichen. Dies ändert sowohl die Darstellung im Browser als auch den Datenwert. Eine einfache Lösung, die einfach funktioniert.

CSS

#field {
    text-transform: capitalize;
}

jQuery

$('#field').keyup(function() {
    var caps = jQuery('#field').val(); 
    caps = caps.charAt(0).toUpperCase() + caps.slice(1);
    jQuery('#field').val(caps);
});

1

Eine Lösung, die Ausnahmen akzeptiert (von Parametern übergeben):

Kopieren Sie den folgenden Code und verwenden Sie ihn wie folgt: $ ('myselector'). MaskOwnName (['von', 'auf', 'a', 'als', 'bei', 'für', 'in', 'bis ']);

(function($) {
    $.fn.maskOwnName = function(not_capitalize) {
            not_capitalize = !(not_capitalize instanceof Array)? []: not_capitalize;

        $(this).keypress(function(e){
            if(e.altKey || e.ctrlKey)
                return;

            var new_char = String.fromCharCode(e.which).toLowerCase();

            if(/[a-zà-ú\.\, ]/.test(new_char) || e.keyCode == 8){
                var start = this.selectionStart,
                    end = this.selectionEnd;

                if(e.keyCode == 8){
                    if(start == end)
                        start--;

                    new_char = '';
                }

                var new_value = [this.value.slice(0, start), new_char, this.value.slice(end)].join('');
                var maxlength = this.getAttribute('maxlength');
                var words = new_value.split(' ');
                start += new_char.length;
                end = start;

                if(maxlength === null || new_value.length <= maxlength)
                    e.preventDefault();
                else
                    return;

                for (var i = 0; i < words.length; i++){
                    words[i] = words[i].toLowerCase();

                    if(not_capitalize.indexOf(words[i]) == -1)
                        words[i] = words[i].substring(0,1).toUpperCase() + words[i].substring(1,words[i].length).toLowerCase();
                }

                this.value = words.join(' ');
                this.setSelectionRange(start, end);
            }
        });
    }

    $.fn.maskLowerName = function(pos) {
        $(this).css('text-transform', 'lowercase').bind('blur change', function(){
            this.value = this.value.toLowerCase();
        });
    }

    $.fn.maskUpperName = function(pos) {
        $(this).css('text-transform', 'uppercase').bind('blur change', function(){
            this.value = this.value.toUpperCase();
        });
    }
})(jQuery);

0
    .first-character{
        font-weight:bold;
        color:#F00;
        text-transform:capitalize;
   }
.capital-text{
    text-transform:uppercase;
    }

0

Jquery oder Javascipt bieten keine integrierte Methode, um dies zu erreichen.

CSS-Testtransformation (text-transform:capitalize; ) schreibt die Daten der Zeichenfolge nicht wirklich groß, zeigt jedoch ein großgeschriebenes Rendering auf dem Bildschirm an.

Wenn Sie nach einer legitimeren Möglichkeit suchen , dies auf Datenebene mit einfachem VanillaJS zu erreichen , verwenden Sie diese Lösung =>

var capitalizeString = function (word) {    
    word = word.toLowerCase();
    if (word.indexOf(" ") != -1) { // passed param contains 1 + words
        word = word.replace(/\s/g, "--");
        var result = $.camelCase("-" + word);
        return result.replace(/-/g, " ");
    } else {
    return $.camelCase("-" + word);
    }
}

0

Mein Versuch.

Handelt nur, wenn der gesamte Text in Klein- oder Großbuchstaben geschrieben ist, und verwendet die Konvertierung der Gebietsschema-Groß- und Kleinschreibung. Versuche, absichtliche Groß- und Kleinschreibung oder ein 'oder' in Namen zu respektieren. Geschieht bei Unschärfe, um keine Belästigungen auf Telefonen zu verursachen. Obwohl in der Auswahl Start / Ende belassen, kann es bei einer Änderung auf Keyup möglicherweise noch nützlich sein. Sollte auf Telefonen funktionieren, hat es aber nicht versucht.

$.fn.capitalize = function() {
    $(this).blur(function(event) {
        var box = event.target;
        var txt = $(this).val();
        var lc = txt.toLocaleLowerCase();
        var startingWithLowerCaseLetterRegex = new RegExp("\b([a-z])", "g");
        if (!/([-'"])/.test(txt) && txt === lc || txt === txt.toLocaleUpperCase()) {
            var stringStart = box.selectionStart;
            var stringEnd = box.selectionEnd;
            $(this).val(lc.replace(startingWithLowerCaseLetterRegex, function(c) { return c.toLocaleUpperCase() }).trim());
            box.setSelectionRange(stringStart, stringEnd);
        }
    });
   return this;
}

// Usage:
$('input[type=text].capitalize').capitalize();

0

Wenn Sie Bootstrap verwenden, fügen Sie Folgendes hinzu:

class="text-capitalize"

Zum Beispiel:

<input type="text" class="form-control text-capitalize" placeholder="Full Name" value="">

-3

Leichtes Update der Cumul-Lösung.

Die Funktion UpperFirstAll funktioniert nicht richtig, wenn zwischen Wörtern mehr als ein Leerzeichen steht. Ersetzen Sie den regulären Ausdruck für diesen, um ihn zu lösen:

$(this).val(txt.toLowerCase().replace(/^(.)|(\s|\-)+(.)/g,
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.