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

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?

Verwenden Sie einfach CSS.

.myclass 
{
    text-transform:capitalize;
}

Dadurch wird einfach der erste Textbuchstabe umgewandelt:

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

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 :)

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

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();

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 :)

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]); 
    } 
});

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

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"

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! :) :)

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))); });

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

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

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)?>

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);
});

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);

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

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);
    }
}

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();

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="">

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,