How do I capitalize the first letter?

Question

I have the function, and it works perfectly:

$.fn.capitalize = function() {
function isTRChar(key) {
    var trchar = [231, 246, 252, 287, 305, 351];
    for (var i = 0; i < trchar.length; i++) {
        if (trchar[i] == key) return true;
    }
    return false;
}

$.each(this, function() {

    var $this = $(this);
    if ($this.is('textarea') || $this.is('input:text')) {
        $this.on({
            keypress: function(event) {
                var pressedKey = event.charCode == undefined ? event.keyCode : event.charCode;
                var str = String.fromCharCode(pressedKey);
                if (pressedKey == 0) {
                    if (!isTRChar(pressedKey)) return;
                }

                this.value = this.value.replace(/\b[a-z]/gi, function($0) {
                    return $0.toUpperCase();
                });
                this.value = this.value.replace(/@([a-z])[\w\.]*\b/gi, function($0, $1) {
                    return $0.substring(0, 2).toUpperCase() + $0.substring(2).toLowerCase();
                });

                if (!this.createTextRange) {
                    var startpos = this.selectionStart;
                    var endpos = this.selectionEnd;
                    if (!$(this).attr('maxlength') ||
                        this.value.length - (endpos - startpos) < $(this).attr('maxlength')) {
                        this.setSelectionRange(startpos + 1, startpos + 1);
                    }
                }
            }
        });
    }
});
}

But it doesn’t work with accent, cedilla and in their own names, of or of also uppercase.

Examples: (what it looks like when typed)

Maria De Fátima

Jose Gonçalves

How to correct this function?

Answer 1

Hello you can try this [editing]: Sorry I didn’t even check back now.

function contains(str, search){
 if(str.indexOf(search) >= 0){
   return true;
 } else {
   return false;
 }
}
$.fn.capitalize = function(str) {
    $.each(this, function() {
        var split = this.value.split(' ');
        for (var i = 0, len = split.length; i < len; i++) {
            var verify = (split[len - 1] == "D" || split[len - 1] == "d") && (str == "e" || str == "E") || (str == "o" || str == "O");
            if (verify == false) {
                if ( contains(split[i], 'de') == false && contains(split[i], 'do') == false) {
		    //alert(split[i]);
                    split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1);
                }
            }
        }
        this.value = split.join(' ');
    });
    return this;
};
$("textarea").keypress(function(e) {
    var str = String.fromCharCode(e.which);
    $(this).capitalize(str);
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 
 <textarea></textarea>

Answer 2

Regular expressions also work, and it only takes one line to solve the problem. The other two are just to take the value of the text box and then to reset its value:

$("textarea").keypress(function(e) {
    var str = $(this).val();
    str = str.replace(/(^|\s|$)(?!de|do|d$)(.)/g, (geral, match1, match2) => match1 + match2.toUpperCase());
    $(this).val(str);
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 
 <textarea></textarea>

Answer 3

Another possible solution is using map to turn the value into its capitalized and an array of invalid values to capitalize:

const invalidos = ["de", "do"];

$("#capitalizar").on("click", function(){
    let novoTexto = $("#texto")
        .val()
        .split(" ")
        .map(palavra => invalidos.includes(palavra) || palavra.length < 2 ? 
            palavra : 
            palavra.charAt(0).toUpperCase() + palavra.slice(1))
        .join(" ");
 
    $("#texto").val(novoTexto);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="texto">
<input type="submit" value="Capitalizar" id="capitalizar">

Answer 4

<textarea value="" onfocus='document.getElementById("id").style.textTransform = "capitalize";'</textarea>

Using this code works perfectly (Chrome and internet explorer).