Capitalize after period in javascript live, while writing in the input field

Question

How to capitalize first letter after period? For example, If entering name in textbox like j.daniel pigott or j. daniel pigott it should reflect as J.Daniel Pigott and remove space. I can capitalize first letter while typing, how to change letter to uppercase after period from below code.

<asp:TextBox ID="tbxName" runat="server" CssClass="tbxCandidateInfo" TabIndex="1"></asp:TextBox>

    $('#tbxName').keyup(function (event) {
        var arrWord = $(this).val().split(' ');
        var result = "";

        for (var i = 0; i < arrWord.length; i++) {
            result += arrWord[i].substring(0, 1).toUpperCase() + arrWord[i].substring(1).toLowerCase();
            if (i < arrWord.length - 1) {
                result += ' ';
            }
        }
        $(this).val(result);
    });

    1) While user entering his name (any name) it should *Capitalize* first letter
    2) If user entering his name along with initial then *Capitalize* the word after period.
3) Uppercase for entire words not allowed.
These changes should happen while entering this name field ***onkeyup*** event

Seems you WANT to capitalize ALL initial letters. Why is after a full stop relevant? You would for example (wrongly) capitalize many Dutch/German names like "R. van Winkel" - Also I do not want to be `M.Plungjan`I want to be `M. Plungjan` with a space — mplungjan, May 25 '18 at 11:33
btw, from the [sight of typography](https://english.stackexchange.com/questions/11332/should-there-be-a-space-between-name-initials), the space after the dot is necessary. — Nina Scholz, May 25 '18 at 11:44
what should happens with some name parts, like `'van Helsing'`? — Nina Scholz, May 25 '18 at 11:45
@0143.NetUser do not forget to accept an answer, if there is a solution which helped you — Bogdan M., May 29 '18 at 09:54

Bogdan M. · Answer 1 · 2018-05-29T09:53:15.527

2

My suggestion is this:

console.log('example:')
console.log(
    "j. delan pegot".replace(/\b\w/g, l => l.toUpperCase()).replace('. ', '.')
);

const stringCapitalize = (str) => {
  return str.replace(/\b\w/g, l => l.toUpperCase()).replace('. ', '.')
}

const onChange = (evt) => {
  const input = document.getElementById("input");
  input.value = stringCapitalize(input.value);
}

<Label>Write something: </Label><input id="input" onkeyup="onChange()" />

You need to attach an onkeyup function which will do what I described above. Try the input in the demo.

Edit: For understanding the regex please refer to:

https://stackoverflow.com/questions/11874234/difference-between-w-and-b-regular-expression-meta-characters

edited May 29 '18 at 09:53

answered May 25 '18 at 11:32

Bogdan M.

2,161
6
31
53

While I agree with this answer, I recommend to add an explanation for the regex. – Martijn May 25 '18 at 11:59
Thank you very much Bogdan, It should not accept all letter in uppercase only first letter – 0143.NetUser May 25 '18 at 12:02
@Martijn added a reference – Bogdan M. May 30 '18 at 12:59

score 0 · Answer 2 · 2018-05-25T11:42:15.183

0

You can also try to do it with CSS --

#tbxName {
  text-transform: capitalize;
}

See the reference here -- https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

It'll work as you're typing, too.

edited May 25 '18 at 11:42

answered May 25 '18 at 11:34

score 0 · Answer 3 · answered May 25 '18 at 13:32

0

function upperCase(){
var a = document.getElementById('input');
var val = a.value;
uppCase = val.charAt(0).toUpperCase() + val.slice(1)
a.value = uppCase;
}

<input id="input" onkeyup="upperCase()" />

answered May 25 '18 at 13:32

vicky patel

699
2
8
14

Capitalize after period in javascript live, while writing in the input field

3 Answers3