How to put the first letter capitalized and the rest lowercase?












8















1) I'm trying to apply the first letter in uppercase and the other as lowercase. If the user write in the input, it should automatically transform. Examples:




"isaac guilherme araújo" to "Isaac Guilherme Araújo"



"iSAAC guILHErme aRAÚJO" to "Isaac Guilherme Araújo"




2) In Brazil there are names with connectives.
Examples: "das" "da" "dos" "do" "de" "e".




Carlos Eduardo Julio dos Santos



Carlos Eduardo dos Santos e Silva



Carlos Eduardo da Silva




3) I am having this problem to work with the name fields. With the following code, i could apply the first letter in uppercase, but the others as lowercase i couldn't. Then, according to problem number 2, if I write:




value entered: "douglas de oliveira júnior"



should be: "Douglas de Oliveira Júnior"



shouldn't: "douglas de Oliveira Júnior". //value shown with current code







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) {
split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1);
}
}
}
this.value = split.join(' ');
});
return this;
};

$(".capitalize").keypress(function(e) {
var str = String.fromCharCode(e.which);
$(this).capitalize(str);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Nome: </label>
<input type="text" id="nome" name="nome" class="form-control input-sm capitalize">





I'm a new member here on Stackoverflow and I apologize for the mistakes, I am learning javascript. Thank you!










share|improve this question

























  • Doing it as they type will screw up delete key, putting cursor in different spots, etc.

    – epascarello
    Sep 8 '17 at 18:05






  • 1





    Does it have to be on key press? it will be easier to change to value only on change. It would also be more practical since right now, you can't place the cursor in the middle of the input and edit correctly.

    – Karl-André Gagnon
    Sep 8 '17 at 18:05











  • I think it should be: var str = String.fromCharCode(e.target.innerHtml); api.jquery.com/event.target

    – kangaro0
    Sep 8 '17 at 18:13











  • I hadn't seen that question (you can't place the cursor in the middle of the input and edit correctly) before. Honestly, I don't know what to do in this situation. hahaha :(

    – Paulo Pitta
    Sep 8 '17 at 18:15
















8















1) I'm trying to apply the first letter in uppercase and the other as lowercase. If the user write in the input, it should automatically transform. Examples:




"isaac guilherme araújo" to "Isaac Guilherme Araújo"



"iSAAC guILHErme aRAÚJO" to "Isaac Guilherme Araújo"




2) In Brazil there are names with connectives.
Examples: "das" "da" "dos" "do" "de" "e".




Carlos Eduardo Julio dos Santos



Carlos Eduardo dos Santos e Silva



Carlos Eduardo da Silva




3) I am having this problem to work with the name fields. With the following code, i could apply the first letter in uppercase, but the others as lowercase i couldn't. Then, according to problem number 2, if I write:




value entered: "douglas de oliveira júnior"



should be: "Douglas de Oliveira Júnior"



shouldn't: "douglas de Oliveira Júnior". //value shown with current code







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) {
split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1);
}
}
}
this.value = split.join(' ');
});
return this;
};

$(".capitalize").keypress(function(e) {
var str = String.fromCharCode(e.which);
$(this).capitalize(str);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Nome: </label>
<input type="text" id="nome" name="nome" class="form-control input-sm capitalize">





I'm a new member here on Stackoverflow and I apologize for the mistakes, I am learning javascript. Thank you!










share|improve this question

























  • Doing it as they type will screw up delete key, putting cursor in different spots, etc.

    – epascarello
    Sep 8 '17 at 18:05






  • 1





    Does it have to be on key press? it will be easier to change to value only on change. It would also be more practical since right now, you can't place the cursor in the middle of the input and edit correctly.

    – Karl-André Gagnon
    Sep 8 '17 at 18:05











  • I think it should be: var str = String.fromCharCode(e.target.innerHtml); api.jquery.com/event.target

    – kangaro0
    Sep 8 '17 at 18:13











  • I hadn't seen that question (you can't place the cursor in the middle of the input and edit correctly) before. Honestly, I don't know what to do in this situation. hahaha :(

    – Paulo Pitta
    Sep 8 '17 at 18:15














8












8








8








1) I'm trying to apply the first letter in uppercase and the other as lowercase. If the user write in the input, it should automatically transform. Examples:




"isaac guilherme araújo" to "Isaac Guilherme Araújo"



"iSAAC guILHErme aRAÚJO" to "Isaac Guilherme Araújo"




2) In Brazil there are names with connectives.
Examples: "das" "da" "dos" "do" "de" "e".




Carlos Eduardo Julio dos Santos



Carlos Eduardo dos Santos e Silva



Carlos Eduardo da Silva




3) I am having this problem to work with the name fields. With the following code, i could apply the first letter in uppercase, but the others as lowercase i couldn't. Then, according to problem number 2, if I write:




value entered: "douglas de oliveira júnior"



should be: "Douglas de Oliveira Júnior"



shouldn't: "douglas de Oliveira Júnior". //value shown with current code







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) {
split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1);
}
}
}
this.value = split.join(' ');
});
return this;
};

$(".capitalize").keypress(function(e) {
var str = String.fromCharCode(e.which);
$(this).capitalize(str);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Nome: </label>
<input type="text" id="nome" name="nome" class="form-control input-sm capitalize">





I'm a new member here on Stackoverflow and I apologize for the mistakes, I am learning javascript. Thank you!










share|improve this question
















1) I'm trying to apply the first letter in uppercase and the other as lowercase. If the user write in the input, it should automatically transform. Examples:




"isaac guilherme araújo" to "Isaac Guilherme Araújo"



"iSAAC guILHErme aRAÚJO" to "Isaac Guilherme Araújo"




2) In Brazil there are names with connectives.
Examples: "das" "da" "dos" "do" "de" "e".




Carlos Eduardo Julio dos Santos



Carlos Eduardo dos Santos e Silva



Carlos Eduardo da Silva




3) I am having this problem to work with the name fields. With the following code, i could apply the first letter in uppercase, but the others as lowercase i couldn't. Then, according to problem number 2, if I write:




value entered: "douglas de oliveira júnior"



should be: "Douglas de Oliveira Júnior"



shouldn't: "douglas de Oliveira Júnior". //value shown with current code







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) {
split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1);
}
}
}
this.value = split.join(' ');
});
return this;
};

$(".capitalize").keypress(function(e) {
var str = String.fromCharCode(e.which);
$(this).capitalize(str);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Nome: </label>
<input type="text" id="nome" name="nome" class="form-control input-sm capitalize">





I'm a new member here on Stackoverflow and I apologize for the mistakes, I am learning javascript. Thank you!






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) {
split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1);
}
}
}
this.value = split.join(' ');
});
return this;
};

$(".capitalize").keypress(function(e) {
var str = String.fromCharCode(e.which);
$(this).capitalize(str);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Nome: </label>
<input type="text" id="nome" name="nome" class="form-control input-sm capitalize">





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) {
split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1);
}
}
}
this.value = split.join(' ');
});
return this;
};

$(".capitalize").keypress(function(e) {
var str = String.fromCharCode(e.which);
$(this).capitalize(str);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Nome: </label>
<input type="text" id="nome" name="nome" class="form-control input-sm capitalize">






javascript jquery






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 15 '18 at 15:57









Erik Philips

41.3k693126




41.3k693126










asked Sep 8 '17 at 18:01









Paulo PittaPaulo Pitta

836




836













  • Doing it as they type will screw up delete key, putting cursor in different spots, etc.

    – epascarello
    Sep 8 '17 at 18:05






  • 1





    Does it have to be on key press? it will be easier to change to value only on change. It would also be more practical since right now, you can't place the cursor in the middle of the input and edit correctly.

    – Karl-André Gagnon
    Sep 8 '17 at 18:05











  • I think it should be: var str = String.fromCharCode(e.target.innerHtml); api.jquery.com/event.target

    – kangaro0
    Sep 8 '17 at 18:13











  • I hadn't seen that question (you can't place the cursor in the middle of the input and edit correctly) before. Honestly, I don't know what to do in this situation. hahaha :(

    – Paulo Pitta
    Sep 8 '17 at 18:15



















  • Doing it as they type will screw up delete key, putting cursor in different spots, etc.

    – epascarello
    Sep 8 '17 at 18:05






  • 1





    Does it have to be on key press? it will be easier to change to value only on change. It would also be more practical since right now, you can't place the cursor in the middle of the input and edit correctly.

    – Karl-André Gagnon
    Sep 8 '17 at 18:05











  • I think it should be: var str = String.fromCharCode(e.target.innerHtml); api.jquery.com/event.target

    – kangaro0
    Sep 8 '17 at 18:13











  • I hadn't seen that question (you can't place the cursor in the middle of the input and edit correctly) before. Honestly, I don't know what to do in this situation. hahaha :(

    – Paulo Pitta
    Sep 8 '17 at 18:15

















Doing it as they type will screw up delete key, putting cursor in different spots, etc.

– epascarello
Sep 8 '17 at 18:05





Doing it as they type will screw up delete key, putting cursor in different spots, etc.

– epascarello
Sep 8 '17 at 18:05




1




1





Does it have to be on key press? it will be easier to change to value only on change. It would also be more practical since right now, you can't place the cursor in the middle of the input and edit correctly.

– Karl-André Gagnon
Sep 8 '17 at 18:05





Does it have to be on key press? it will be easier to change to value only on change. It would also be more practical since right now, you can't place the cursor in the middle of the input and edit correctly.

– Karl-André Gagnon
Sep 8 '17 at 18:05













I think it should be: var str = String.fromCharCode(e.target.innerHtml); api.jquery.com/event.target

– kangaro0
Sep 8 '17 at 18:13





I think it should be: var str = String.fromCharCode(e.target.innerHtml); api.jquery.com/event.target

– kangaro0
Sep 8 '17 at 18:13













I hadn't seen that question (you can't place the cursor in the middle of the input and edit correctly) before. Honestly, I don't know what to do in this situation. hahaha :(

– Paulo Pitta
Sep 8 '17 at 18:15





I hadn't seen that question (you can't place the cursor in the middle of the input and edit correctly) before. Honestly, I don't know what to do in this situation. hahaha :(

– Paulo Pitta
Sep 8 '17 at 18:15












6 Answers
6






active

oldest

votes


















2














This solution also fixes connectives in uppercase, such as carlos DE silva.

Try it with the snippet below :)




var connectives = {
das: true,
da: true,
dos: true,
do: true,
de: true,
e: true
};

function capitalize(str) {
return str
.split(" ")
.map(function(word) {
return !connectives[word.toLowerCase()]
? word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
: word.toLowerCase();
})
.join(" ");
};

$(".capitalize").keyup(function() {
var cursorStart = this.selectionStart;
var cursorEnd = this.selectionEnd;
var capitalizedString = capitalize($(this).val());

$(this).val(capitalizedString);
this.setSelectionRange(cursorStart, cursorEnd);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Nome: </label>
<input type="text" id="nome" name="nome" class="form-control input-sm capitalize">








share|improve this answer


























  • Hello friend, thanks for the contribution!! This solution also fixes connectives in uppercase, but continue with the problem that you can't place the cursor in the middle of the input and edit correctly... but, thanks :)

    – Paulo Pitta
    Sep 8 '17 at 19:11











  • @PauloPitta Made an edit, should work now.

    – Borja Canseco
    Sep 8 '17 at 19:16











  • Thank you, now works!! Can you tell me the difference from your code to these? stackoverflow.com/a/46122855/8577413

    – Paulo Pitta
    Sep 8 '17 at 19:24











  • Aside from complexity: that solution works on keypress rather than keyup, so it's always delayed by one letter. For example, if you type Carlos and then remove the 'C', then it would take 'arlos' as valid input.

    – Borja Canseco
    Sep 8 '17 at 19:28



















2














You could use a format function that capitalizes all words except those provided in a whitelist. Then format the input value whenever the user presses a key (doesn't work well if the user moves the input cursor around though):






function format(string, noCapList=) {
const words = string.toLowerCase().split(' ');
return words.map((word) => {
if(!word.length || noCapList.includes(word)) {
return word;
} else {
return word[0].toUpperCase() + word.slice(1);
}
}).join(' ');
}

const input = document.querySelector('input');
input.addEventListener('keyup', () => {
input.value = format(input.value, ["das", "da", "dos", "do", "de", "e"]);
});

<input/>





It looks like the issue with your code is in how you're formatting the input. I'm not 100% sure I understood the question, but this format function provides the output you were looking for.






share|improve this answer


























  • Hello friend, thanks for the contribution, forgot to mention that I'm not using javascript6. But the question is when the user putting the cursor in the middle of input to change.

    – Paulo Pitta
    Sep 8 '17 at 18:37



















0














SimpleJ's answer is right, but to clarify your original approach: the "problem" is in the contains function - it actually does what it should according to it's name and returns true if the str contains search, so contains('douglas', 'do') === true; you already have the string split into separate words so just use split[i] !== "de" && split[i] !== "do" instead of the contains calls.






share|improve this answer
























  • Hi friend, thank you for the contribution, it's true, lack of attention.

    – Paulo Pitta
    Sep 8 '17 at 18:39



















0














I have posted algorithm in FCC about title casing a sentence . Might it would help you!



 function titleCase(str) {
//First Converted to lowercase in case of test cases are tricky ones
var spl=str.toLowerCase();

//Then Splitted in one word format as leaving one space as ' '
spl = spl.split(' ');

for(var i=0;i<spl.length;i++){

//Again Splitting done to split one letter from that respective word
var spl2= spl[i].split('');

// In specific word's letter looping has to be done in order to
// convert 0th index character to uppercase
for(var j=0;j<spl2.length;j++){

spl2[0]= spl2[0].toUpperCase();
}
// Then Joined Those letters to form into word again
spl[i] = spl2.join('');
}
// Then joined those words to form string
str = spl.join(' ');
return str;
}

titleCase("sHoRt AnD sToUt");





share|improve this answer
























  • Hello friend, thanks for the contribution, I understood the logic that you used to change letters. The question we are raising here is regarding the change directly in the input when the user presses any key. Thank you for the explanation!

    – Paulo Pitta
    Sep 8 '17 at 18:53



















0














I found something that apparently was satisfactory. It even works when the user places the cursor in the middle of the input. I found it here:
Link - Stackoverflow



Can anyone here evaluate and tell me if have some problem with this code from the user Doglas?






function ucfirst (str) {
// discuss at: http://locutus.io/php/ucfirst/
str += '';
var f = str.charAt(0).toUpperCase();
return f + str.substr(1);
}

var not_capitalize = ['de', 'da', 'do', 'das', 'dos', 'e'];
$.fn.maskOwnName = function(pos) {
$(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] = ucfirst(words[i]);
}

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

};

$('.capitalize').maskOwnName();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Nome: </label>
<input type="text" id="nome" name="nome" class="form-control input-sm capitalize">








share|improve this answer


























  • It's using key events while jQuery has perfected the input event handling not efficient.

    – zer00ne
    Sep 8 '17 at 19:36



















0














for simplicity I used npm lodash



https://lodash.com/docs/4.17.11#capitalize



    const _ = require('lodash');
const connectives = {
das: true,
da: true,
dos: true,
do: true,
de: true,
e: true
};


const nameToCapitalize = str.split(' ').map(word => connectives[word] ?
word.toLowercase : _.capitalize(word)).join(' ');





share|improve this answer

























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f46122203%2fhow-to-put-the-first-letter-capitalized-and-the-rest-lowercase%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    6 Answers
    6






    active

    oldest

    votes








    6 Answers
    6






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    2














    This solution also fixes connectives in uppercase, such as carlos DE silva.

    Try it with the snippet below :)




    var connectives = {
    das: true,
    da: true,
    dos: true,
    do: true,
    de: true,
    e: true
    };

    function capitalize(str) {
    return str
    .split(" ")
    .map(function(word) {
    return !connectives[word.toLowerCase()]
    ? word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
    : word.toLowerCase();
    })
    .join(" ");
    };

    $(".capitalize").keyup(function() {
    var cursorStart = this.selectionStart;
    var cursorEnd = this.selectionEnd;
    var capitalizedString = capitalize($(this).val());

    $(this).val(capitalizedString);
    this.setSelectionRange(cursorStart, cursorEnd);
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <label>Nome: </label>
    <input type="text" id="nome" name="nome" class="form-control input-sm capitalize">








    share|improve this answer


























    • Hello friend, thanks for the contribution!! This solution also fixes connectives in uppercase, but continue with the problem that you can't place the cursor in the middle of the input and edit correctly... but, thanks :)

      – Paulo Pitta
      Sep 8 '17 at 19:11











    • @PauloPitta Made an edit, should work now.

      – Borja Canseco
      Sep 8 '17 at 19:16











    • Thank you, now works!! Can you tell me the difference from your code to these? stackoverflow.com/a/46122855/8577413

      – Paulo Pitta
      Sep 8 '17 at 19:24











    • Aside from complexity: that solution works on keypress rather than keyup, so it's always delayed by one letter. For example, if you type Carlos and then remove the 'C', then it would take 'arlos' as valid input.

      – Borja Canseco
      Sep 8 '17 at 19:28
















    2














    This solution also fixes connectives in uppercase, such as carlos DE silva.

    Try it with the snippet below :)




    var connectives = {
    das: true,
    da: true,
    dos: true,
    do: true,
    de: true,
    e: true
    };

    function capitalize(str) {
    return str
    .split(" ")
    .map(function(word) {
    return !connectives[word.toLowerCase()]
    ? word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
    : word.toLowerCase();
    })
    .join(" ");
    };

    $(".capitalize").keyup(function() {
    var cursorStart = this.selectionStart;
    var cursorEnd = this.selectionEnd;
    var capitalizedString = capitalize($(this).val());

    $(this).val(capitalizedString);
    this.setSelectionRange(cursorStart, cursorEnd);
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <label>Nome: </label>
    <input type="text" id="nome" name="nome" class="form-control input-sm capitalize">








    share|improve this answer


























    • Hello friend, thanks for the contribution!! This solution also fixes connectives in uppercase, but continue with the problem that you can't place the cursor in the middle of the input and edit correctly... but, thanks :)

      – Paulo Pitta
      Sep 8 '17 at 19:11











    • @PauloPitta Made an edit, should work now.

      – Borja Canseco
      Sep 8 '17 at 19:16











    • Thank you, now works!! Can you tell me the difference from your code to these? stackoverflow.com/a/46122855/8577413

      – Paulo Pitta
      Sep 8 '17 at 19:24











    • Aside from complexity: that solution works on keypress rather than keyup, so it's always delayed by one letter. For example, if you type Carlos and then remove the 'C', then it would take 'arlos' as valid input.

      – Borja Canseco
      Sep 8 '17 at 19:28














    2












    2








    2







    This solution also fixes connectives in uppercase, such as carlos DE silva.

    Try it with the snippet below :)




    var connectives = {
    das: true,
    da: true,
    dos: true,
    do: true,
    de: true,
    e: true
    };

    function capitalize(str) {
    return str
    .split(" ")
    .map(function(word) {
    return !connectives[word.toLowerCase()]
    ? word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
    : word.toLowerCase();
    })
    .join(" ");
    };

    $(".capitalize").keyup(function() {
    var cursorStart = this.selectionStart;
    var cursorEnd = this.selectionEnd;
    var capitalizedString = capitalize($(this).val());

    $(this).val(capitalizedString);
    this.setSelectionRange(cursorStart, cursorEnd);
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <label>Nome: </label>
    <input type="text" id="nome" name="nome" class="form-control input-sm capitalize">








    share|improve this answer















    This solution also fixes connectives in uppercase, such as carlos DE silva.

    Try it with the snippet below :)




    var connectives = {
    das: true,
    da: true,
    dos: true,
    do: true,
    de: true,
    e: true
    };

    function capitalize(str) {
    return str
    .split(" ")
    .map(function(word) {
    return !connectives[word.toLowerCase()]
    ? word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
    : word.toLowerCase();
    })
    .join(" ");
    };

    $(".capitalize").keyup(function() {
    var cursorStart = this.selectionStart;
    var cursorEnd = this.selectionEnd;
    var capitalizedString = capitalize($(this).val());

    $(this).val(capitalizedString);
    this.setSelectionRange(cursorStart, cursorEnd);
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <label>Nome: </label>
    <input type="text" id="nome" name="nome" class="form-control input-sm capitalize">








    var connectives = {
    das: true,
    da: true,
    dos: true,
    do: true,
    de: true,
    e: true
    };

    function capitalize(str) {
    return str
    .split(" ")
    .map(function(word) {
    return !connectives[word.toLowerCase()]
    ? word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
    : word.toLowerCase();
    })
    .join(" ");
    };

    $(".capitalize").keyup(function() {
    var cursorStart = this.selectionStart;
    var cursorEnd = this.selectionEnd;
    var capitalizedString = capitalize($(this).val());

    $(this).val(capitalizedString);
    this.setSelectionRange(cursorStart, cursorEnd);
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <label>Nome: </label>
    <input type="text" id="nome" name="nome" class="form-control input-sm capitalize">





    var connectives = {
    das: true,
    da: true,
    dos: true,
    do: true,
    de: true,
    e: true
    };

    function capitalize(str) {
    return str
    .split(" ")
    .map(function(word) {
    return !connectives[word.toLowerCase()]
    ? word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
    : word.toLowerCase();
    })
    .join(" ");
    };

    $(".capitalize").keyup(function() {
    var cursorStart = this.selectionStart;
    var cursorEnd = this.selectionEnd;
    var capitalizedString = capitalize($(this).val());

    $(this).val(capitalizedString);
    this.setSelectionRange(cursorStart, cursorEnd);
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <label>Nome: </label>
    <input type="text" id="nome" name="nome" class="form-control input-sm capitalize">






    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Sep 11 '17 at 21:59

























    answered Sep 8 '17 at 18:26









    Borja CansecoBorja Canseco

    158518




    158518













    • Hello friend, thanks for the contribution!! This solution also fixes connectives in uppercase, but continue with the problem that you can't place the cursor in the middle of the input and edit correctly... but, thanks :)

      – Paulo Pitta
      Sep 8 '17 at 19:11











    • @PauloPitta Made an edit, should work now.

      – Borja Canseco
      Sep 8 '17 at 19:16











    • Thank you, now works!! Can you tell me the difference from your code to these? stackoverflow.com/a/46122855/8577413

      – Paulo Pitta
      Sep 8 '17 at 19:24











    • Aside from complexity: that solution works on keypress rather than keyup, so it's always delayed by one letter. For example, if you type Carlos and then remove the 'C', then it would take 'arlos' as valid input.

      – Borja Canseco
      Sep 8 '17 at 19:28



















    • Hello friend, thanks for the contribution!! This solution also fixes connectives in uppercase, but continue with the problem that you can't place the cursor in the middle of the input and edit correctly... but, thanks :)

      – Paulo Pitta
      Sep 8 '17 at 19:11











    • @PauloPitta Made an edit, should work now.

      – Borja Canseco
      Sep 8 '17 at 19:16











    • Thank you, now works!! Can you tell me the difference from your code to these? stackoverflow.com/a/46122855/8577413

      – Paulo Pitta
      Sep 8 '17 at 19:24











    • Aside from complexity: that solution works on keypress rather than keyup, so it's always delayed by one letter. For example, if you type Carlos and then remove the 'C', then it would take 'arlos' as valid input.

      – Borja Canseco
      Sep 8 '17 at 19:28

















    Hello friend, thanks for the contribution!! This solution also fixes connectives in uppercase, but continue with the problem that you can't place the cursor in the middle of the input and edit correctly... but, thanks :)

    – Paulo Pitta
    Sep 8 '17 at 19:11





    Hello friend, thanks for the contribution!! This solution also fixes connectives in uppercase, but continue with the problem that you can't place the cursor in the middle of the input and edit correctly... but, thanks :)

    – Paulo Pitta
    Sep 8 '17 at 19:11













    @PauloPitta Made an edit, should work now.

    – Borja Canseco
    Sep 8 '17 at 19:16





    @PauloPitta Made an edit, should work now.

    – Borja Canseco
    Sep 8 '17 at 19:16













    Thank you, now works!! Can you tell me the difference from your code to these? stackoverflow.com/a/46122855/8577413

    – Paulo Pitta
    Sep 8 '17 at 19:24





    Thank you, now works!! Can you tell me the difference from your code to these? stackoverflow.com/a/46122855/8577413

    – Paulo Pitta
    Sep 8 '17 at 19:24













    Aside from complexity: that solution works on keypress rather than keyup, so it's always delayed by one letter. For example, if you type Carlos and then remove the 'C', then it would take 'arlos' as valid input.

    – Borja Canseco
    Sep 8 '17 at 19:28





    Aside from complexity: that solution works on keypress rather than keyup, so it's always delayed by one letter. For example, if you type Carlos and then remove the 'C', then it would take 'arlos' as valid input.

    – Borja Canseco
    Sep 8 '17 at 19:28













    2














    You could use a format function that capitalizes all words except those provided in a whitelist. Then format the input value whenever the user presses a key (doesn't work well if the user moves the input cursor around though):






    function format(string, noCapList=) {
    const words = string.toLowerCase().split(' ');
    return words.map((word) => {
    if(!word.length || noCapList.includes(word)) {
    return word;
    } else {
    return word[0].toUpperCase() + word.slice(1);
    }
    }).join(' ');
    }

    const input = document.querySelector('input');
    input.addEventListener('keyup', () => {
    input.value = format(input.value, ["das", "da", "dos", "do", "de", "e"]);
    });

    <input/>





    It looks like the issue with your code is in how you're formatting the input. I'm not 100% sure I understood the question, but this format function provides the output you were looking for.






    share|improve this answer


























    • Hello friend, thanks for the contribution, forgot to mention that I'm not using javascript6. But the question is when the user putting the cursor in the middle of input to change.

      – Paulo Pitta
      Sep 8 '17 at 18:37
















    2














    You could use a format function that capitalizes all words except those provided in a whitelist. Then format the input value whenever the user presses a key (doesn't work well if the user moves the input cursor around though):






    function format(string, noCapList=) {
    const words = string.toLowerCase().split(' ');
    return words.map((word) => {
    if(!word.length || noCapList.includes(word)) {
    return word;
    } else {
    return word[0].toUpperCase() + word.slice(1);
    }
    }).join(' ');
    }

    const input = document.querySelector('input');
    input.addEventListener('keyup', () => {
    input.value = format(input.value, ["das", "da", "dos", "do", "de", "e"]);
    });

    <input/>





    It looks like the issue with your code is in how you're formatting the input. I'm not 100% sure I understood the question, but this format function provides the output you were looking for.






    share|improve this answer


























    • Hello friend, thanks for the contribution, forgot to mention that I'm not using javascript6. But the question is when the user putting the cursor in the middle of input to change.

      – Paulo Pitta
      Sep 8 '17 at 18:37














    2












    2








    2







    You could use a format function that capitalizes all words except those provided in a whitelist. Then format the input value whenever the user presses a key (doesn't work well if the user moves the input cursor around though):






    function format(string, noCapList=) {
    const words = string.toLowerCase().split(' ');
    return words.map((word) => {
    if(!word.length || noCapList.includes(word)) {
    return word;
    } else {
    return word[0].toUpperCase() + word.slice(1);
    }
    }).join(' ');
    }

    const input = document.querySelector('input');
    input.addEventListener('keyup', () => {
    input.value = format(input.value, ["das", "da", "dos", "do", "de", "e"]);
    });

    <input/>





    It looks like the issue with your code is in how you're formatting the input. I'm not 100% sure I understood the question, but this format function provides the output you were looking for.






    share|improve this answer















    You could use a format function that capitalizes all words except those provided in a whitelist. Then format the input value whenever the user presses a key (doesn't work well if the user moves the input cursor around though):






    function format(string, noCapList=) {
    const words = string.toLowerCase().split(' ');
    return words.map((word) => {
    if(!word.length || noCapList.includes(word)) {
    return word;
    } else {
    return word[0].toUpperCase() + word.slice(1);
    }
    }).join(' ');
    }

    const input = document.querySelector('input');
    input.addEventListener('keyup', () => {
    input.value = format(input.value, ["das", "da", "dos", "do", "de", "e"]);
    });

    <input/>





    It looks like the issue with your code is in how you're formatting the input. I'm not 100% sure I understood the question, but this format function provides the output you were looking for.






    function format(string, noCapList=) {
    const words = string.toLowerCase().split(' ');
    return words.map((word) => {
    if(!word.length || noCapList.includes(word)) {
    return word;
    } else {
    return word[0].toUpperCase() + word.slice(1);
    }
    }).join(' ');
    }

    const input = document.querySelector('input');
    input.addEventListener('keyup', () => {
    input.value = format(input.value, ["das", "da", "dos", "do", "de", "e"]);
    });

    <input/>





    function format(string, noCapList=) {
    const words = string.toLowerCase().split(' ');
    return words.map((word) => {
    if(!word.length || noCapList.includes(word)) {
    return word;
    } else {
    return word[0].toUpperCase() + word.slice(1);
    }
    }).join(' ');
    }

    const input = document.querySelector('input');
    input.addEventListener('keyup', () => {
    input.value = format(input.value, ["das", "da", "dos", "do", "de", "e"]);
    });

    <input/>






    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Sep 8 '17 at 18:25

























    answered Sep 8 '17 at 18:18









    SimpleJSimpleJ

    5,93742246




    5,93742246













    • Hello friend, thanks for the contribution, forgot to mention that I'm not using javascript6. But the question is when the user putting the cursor in the middle of input to change.

      – Paulo Pitta
      Sep 8 '17 at 18:37



















    • Hello friend, thanks for the contribution, forgot to mention that I'm not using javascript6. But the question is when the user putting the cursor in the middle of input to change.

      – Paulo Pitta
      Sep 8 '17 at 18:37

















    Hello friend, thanks for the contribution, forgot to mention that I'm not using javascript6. But the question is when the user putting the cursor in the middle of input to change.

    – Paulo Pitta
    Sep 8 '17 at 18:37





    Hello friend, thanks for the contribution, forgot to mention that I'm not using javascript6. But the question is when the user putting the cursor in the middle of input to change.

    – Paulo Pitta
    Sep 8 '17 at 18:37











    0














    SimpleJ's answer is right, but to clarify your original approach: the "problem" is in the contains function - it actually does what it should according to it's name and returns true if the str contains search, so contains('douglas', 'do') === true; you already have the string split into separate words so just use split[i] !== "de" && split[i] !== "do" instead of the contains calls.






    share|improve this answer
























    • Hi friend, thank you for the contribution, it's true, lack of attention.

      – Paulo Pitta
      Sep 8 '17 at 18:39
















    0














    SimpleJ's answer is right, but to clarify your original approach: the "problem" is in the contains function - it actually does what it should according to it's name and returns true if the str contains search, so contains('douglas', 'do') === true; you already have the string split into separate words so just use split[i] !== "de" && split[i] !== "do" instead of the contains calls.






    share|improve this answer
























    • Hi friend, thank you for the contribution, it's true, lack of attention.

      – Paulo Pitta
      Sep 8 '17 at 18:39














    0












    0








    0







    SimpleJ's answer is right, but to clarify your original approach: the "problem" is in the contains function - it actually does what it should according to it's name and returns true if the str contains search, so contains('douglas', 'do') === true; you already have the string split into separate words so just use split[i] !== "de" && split[i] !== "do" instead of the contains calls.






    share|improve this answer













    SimpleJ's answer is right, but to clarify your original approach: the "problem" is in the contains function - it actually does what it should according to it's name and returns true if the str contains search, so contains('douglas', 'do') === true; you already have the string split into separate words so just use split[i] !== "de" && split[i] !== "do" instead of the contains calls.







    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Sep 8 '17 at 18:26









    Tomas VargaTomas Varga

    866820




    866820













    • Hi friend, thank you for the contribution, it's true, lack of attention.

      – Paulo Pitta
      Sep 8 '17 at 18:39



















    • Hi friend, thank you for the contribution, it's true, lack of attention.

      – Paulo Pitta
      Sep 8 '17 at 18:39

















    Hi friend, thank you for the contribution, it's true, lack of attention.

    – Paulo Pitta
    Sep 8 '17 at 18:39





    Hi friend, thank you for the contribution, it's true, lack of attention.

    – Paulo Pitta
    Sep 8 '17 at 18:39











    0














    I have posted algorithm in FCC about title casing a sentence . Might it would help you!



     function titleCase(str) {
    //First Converted to lowercase in case of test cases are tricky ones
    var spl=str.toLowerCase();

    //Then Splitted in one word format as leaving one space as ' '
    spl = spl.split(' ');

    for(var i=0;i<spl.length;i++){

    //Again Splitting done to split one letter from that respective word
    var spl2= spl[i].split('');

    // In specific word's letter looping has to be done in order to
    // convert 0th index character to uppercase
    for(var j=0;j<spl2.length;j++){

    spl2[0]= spl2[0].toUpperCase();
    }
    // Then Joined Those letters to form into word again
    spl[i] = spl2.join('');
    }
    // Then joined those words to form string
    str = spl.join(' ');
    return str;
    }

    titleCase("sHoRt AnD sToUt");





    share|improve this answer
























    • Hello friend, thanks for the contribution, I understood the logic that you used to change letters. The question we are raising here is regarding the change directly in the input when the user presses any key. Thank you for the explanation!

      – Paulo Pitta
      Sep 8 '17 at 18:53
















    0














    I have posted algorithm in FCC about title casing a sentence . Might it would help you!



     function titleCase(str) {
    //First Converted to lowercase in case of test cases are tricky ones
    var spl=str.toLowerCase();

    //Then Splitted in one word format as leaving one space as ' '
    spl = spl.split(' ');

    for(var i=0;i<spl.length;i++){

    //Again Splitting done to split one letter from that respective word
    var spl2= spl[i].split('');

    // In specific word's letter looping has to be done in order to
    // convert 0th index character to uppercase
    for(var j=0;j<spl2.length;j++){

    spl2[0]= spl2[0].toUpperCase();
    }
    // Then Joined Those letters to form into word again
    spl[i] = spl2.join('');
    }
    // Then joined those words to form string
    str = spl.join(' ');
    return str;
    }

    titleCase("sHoRt AnD sToUt");





    share|improve this answer
























    • Hello friend, thanks for the contribution, I understood the logic that you used to change letters. The question we are raising here is regarding the change directly in the input when the user presses any key. Thank you for the explanation!

      – Paulo Pitta
      Sep 8 '17 at 18:53














    0












    0








    0







    I have posted algorithm in FCC about title casing a sentence . Might it would help you!



     function titleCase(str) {
    //First Converted to lowercase in case of test cases are tricky ones
    var spl=str.toLowerCase();

    //Then Splitted in one word format as leaving one space as ' '
    spl = spl.split(' ');

    for(var i=0;i<spl.length;i++){

    //Again Splitting done to split one letter from that respective word
    var spl2= spl[i].split('');

    // In specific word's letter looping has to be done in order to
    // convert 0th index character to uppercase
    for(var j=0;j<spl2.length;j++){

    spl2[0]= spl2[0].toUpperCase();
    }
    // Then Joined Those letters to form into word again
    spl[i] = spl2.join('');
    }
    // Then joined those words to form string
    str = spl.join(' ');
    return str;
    }

    titleCase("sHoRt AnD sToUt");





    share|improve this answer













    I have posted algorithm in FCC about title casing a sentence . Might it would help you!



     function titleCase(str) {
    //First Converted to lowercase in case of test cases are tricky ones
    var spl=str.toLowerCase();

    //Then Splitted in one word format as leaving one space as ' '
    spl = spl.split(' ');

    for(var i=0;i<spl.length;i++){

    //Again Splitting done to split one letter from that respective word
    var spl2= spl[i].split('');

    // In specific word's letter looping has to be done in order to
    // convert 0th index character to uppercase
    for(var j=0;j<spl2.length;j++){

    spl2[0]= spl2[0].toUpperCase();
    }
    // Then Joined Those letters to form into word again
    spl[i] = spl2.join('');
    }
    // Then joined those words to form string
    str = spl.join(' ');
    return str;
    }

    titleCase("sHoRt AnD sToUt");






    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Sep 8 '17 at 18:38









    Meet ZaveriMeet Zaveri

    7391816




    7391816













    • Hello friend, thanks for the contribution, I understood the logic that you used to change letters. The question we are raising here is regarding the change directly in the input when the user presses any key. Thank you for the explanation!

      – Paulo Pitta
      Sep 8 '17 at 18:53



















    • Hello friend, thanks for the contribution, I understood the logic that you used to change letters. The question we are raising here is regarding the change directly in the input when the user presses any key. Thank you for the explanation!

      – Paulo Pitta
      Sep 8 '17 at 18:53

















    Hello friend, thanks for the contribution, I understood the logic that you used to change letters. The question we are raising here is regarding the change directly in the input when the user presses any key. Thank you for the explanation!

    – Paulo Pitta
    Sep 8 '17 at 18:53





    Hello friend, thanks for the contribution, I understood the logic that you used to change letters. The question we are raising here is regarding the change directly in the input when the user presses any key. Thank you for the explanation!

    – Paulo Pitta
    Sep 8 '17 at 18:53











    0














    I found something that apparently was satisfactory. It even works when the user places the cursor in the middle of the input. I found it here:
    Link - Stackoverflow



    Can anyone here evaluate and tell me if have some problem with this code from the user Doglas?






    function ucfirst (str) {
    // discuss at: http://locutus.io/php/ucfirst/
    str += '';
    var f = str.charAt(0).toUpperCase();
    return f + str.substr(1);
    }

    var not_capitalize = ['de', 'da', 'do', 'das', 'dos', 'e'];
    $.fn.maskOwnName = function(pos) {
    $(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] = ucfirst(words[i]);
    }

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

    };

    $('.capitalize').maskOwnName();

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <label>Nome: </label>
    <input type="text" id="nome" name="nome" class="form-control input-sm capitalize">








    share|improve this answer


























    • It's using key events while jQuery has perfected the input event handling not efficient.

      – zer00ne
      Sep 8 '17 at 19:36
















    0














    I found something that apparently was satisfactory. It even works when the user places the cursor in the middle of the input. I found it here:
    Link - Stackoverflow



    Can anyone here evaluate and tell me if have some problem with this code from the user Doglas?






    function ucfirst (str) {
    // discuss at: http://locutus.io/php/ucfirst/
    str += '';
    var f = str.charAt(0).toUpperCase();
    return f + str.substr(1);
    }

    var not_capitalize = ['de', 'da', 'do', 'das', 'dos', 'e'];
    $.fn.maskOwnName = function(pos) {
    $(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] = ucfirst(words[i]);
    }

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

    };

    $('.capitalize').maskOwnName();

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <label>Nome: </label>
    <input type="text" id="nome" name="nome" class="form-control input-sm capitalize">








    share|improve this answer


























    • It's using key events while jQuery has perfected the input event handling not efficient.

      – zer00ne
      Sep 8 '17 at 19:36














    0












    0








    0







    I found something that apparently was satisfactory. It even works when the user places the cursor in the middle of the input. I found it here:
    Link - Stackoverflow



    Can anyone here evaluate and tell me if have some problem with this code from the user Doglas?






    function ucfirst (str) {
    // discuss at: http://locutus.io/php/ucfirst/
    str += '';
    var f = str.charAt(0).toUpperCase();
    return f + str.substr(1);
    }

    var not_capitalize = ['de', 'da', 'do', 'das', 'dos', 'e'];
    $.fn.maskOwnName = function(pos) {
    $(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] = ucfirst(words[i]);
    }

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

    };

    $('.capitalize').maskOwnName();

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <label>Nome: </label>
    <input type="text" id="nome" name="nome" class="form-control input-sm capitalize">








    share|improve this answer















    I found something that apparently was satisfactory. It even works when the user places the cursor in the middle of the input. I found it here:
    Link - Stackoverflow



    Can anyone here evaluate and tell me if have some problem with this code from the user Doglas?






    function ucfirst (str) {
    // discuss at: http://locutus.io/php/ucfirst/
    str += '';
    var f = str.charAt(0).toUpperCase();
    return f + str.substr(1);
    }

    var not_capitalize = ['de', 'da', 'do', 'das', 'dos', 'e'];
    $.fn.maskOwnName = function(pos) {
    $(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] = ucfirst(words[i]);
    }

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

    };

    $('.capitalize').maskOwnName();

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <label>Nome: </label>
    <input type="text" id="nome" name="nome" class="form-control input-sm capitalize">








    function ucfirst (str) {
    // discuss at: http://locutus.io/php/ucfirst/
    str += '';
    var f = str.charAt(0).toUpperCase();
    return f + str.substr(1);
    }

    var not_capitalize = ['de', 'da', 'do', 'das', 'dos', 'e'];
    $.fn.maskOwnName = function(pos) {
    $(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] = ucfirst(words[i]);
    }

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

    };

    $('.capitalize').maskOwnName();

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <label>Nome: </label>
    <input type="text" id="nome" name="nome" class="form-control input-sm capitalize">





    function ucfirst (str) {
    // discuss at: http://locutus.io/php/ucfirst/
    str += '';
    var f = str.charAt(0).toUpperCase();
    return f + str.substr(1);
    }

    var not_capitalize = ['de', 'da', 'do', 'das', 'dos', 'e'];
    $.fn.maskOwnName = function(pos) {
    $(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] = ucfirst(words[i]);
    }

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

    };

    $('.capitalize').maskOwnName();

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <label>Nome: </label>
    <input type="text" id="nome" name="nome" class="form-control input-sm capitalize">






    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Sep 8 '17 at 19:12

























    answered Sep 8 '17 at 18:48









    Paulo PittaPaulo Pitta

    836




    836













    • It's using key events while jQuery has perfected the input event handling not efficient.

      – zer00ne
      Sep 8 '17 at 19:36



















    • It's using key events while jQuery has perfected the input event handling not efficient.

      – zer00ne
      Sep 8 '17 at 19:36

















    It's using key events while jQuery has perfected the input event handling not efficient.

    – zer00ne
    Sep 8 '17 at 19:36





    It's using key events while jQuery has perfected the input event handling not efficient.

    – zer00ne
    Sep 8 '17 at 19:36











    0














    for simplicity I used npm lodash



    https://lodash.com/docs/4.17.11#capitalize



        const _ = require('lodash');
    const connectives = {
    das: true,
    da: true,
    dos: true,
    do: true,
    de: true,
    e: true
    };


    const nameToCapitalize = str.split(' ').map(word => connectives[word] ?
    word.toLowercase : _.capitalize(word)).join(' ');





    share|improve this answer






























      0














      for simplicity I used npm lodash



      https://lodash.com/docs/4.17.11#capitalize



          const _ = require('lodash');
      const connectives = {
      das: true,
      da: true,
      dos: true,
      do: true,
      de: true,
      e: true
      };


      const nameToCapitalize = str.split(' ').map(word => connectives[word] ?
      word.toLowercase : _.capitalize(word)).join(' ');





      share|improve this answer




























        0












        0








        0







        for simplicity I used npm lodash



        https://lodash.com/docs/4.17.11#capitalize



            const _ = require('lodash');
        const connectives = {
        das: true,
        da: true,
        dos: true,
        do: true,
        de: true,
        e: true
        };


        const nameToCapitalize = str.split(' ').map(word => connectives[word] ?
        word.toLowercase : _.capitalize(word)).join(' ');





        share|improve this answer















        for simplicity I used npm lodash



        https://lodash.com/docs/4.17.11#capitalize



            const _ = require('lodash');
        const connectives = {
        das: true,
        da: true,
        dos: true,
        do: true,
        de: true,
        e: true
        };


        const nameToCapitalize = str.split(' ').map(word => connectives[word] ?
        word.toLowercase : _.capitalize(word)).join(' ');






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Nov 15 '18 at 17:56

























        answered Nov 15 '18 at 15:40









        chaimmchaimm

        12




        12






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f46122203%2fhow-to-put-the-first-letter-capitalized-and-the-rest-lowercase%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Florida Star v. B. J. F.

            Danny Elfman

            Lugert, Oklahoma