Format input text to uppercase

Question

I'm begginer and I would like to build an event that started on change of input. The text entered in the input would be automatically formatted as follows:

The first letter must always be uppercase;
All other letters must be lowercase.

function formating() {
  var nameOfPerson = document.getElementById("nameOfPerson").textContent;
  var nameOfPerson = nameOfPerson[0].toUpperCase() + (nameOfPerson - nameOfPerson[0]);
  document.getElementById("nameOfPerson").textContent = nameOfPerson;
}

<input type="text" id="nameOfPerson" onchange="formatting()" placeholder="type your name">

`+(nameOfPerson - nameOfPerson[0])` should be `+(nameOfPerson.substr(1))` — Jaromanda X, Jan 15 '17 at 05:59
There is a typo. Function name should be `formatting`. 2 `t`s not 1 — Rajesh, Jan 15 '17 at 06:05
Possible Duplicate: http://stackoverflow.com/questions/34871518/how-to-apply-title-case-in-input-box-through-css — Rajesh, Jan 15 '17 at 06:08
Your question was answered here: https://stackoverflow.com/questions/4878756/javascript-how-to-capitalize-first-letter-of-each-word-like-a-2-word-city — Mostafa Omar, Jan 15 '17 at 06:48

jackarms · Answer 1 · 2017-01-15T06:46:27.987

2

Try this:

function formatting() {
  var nameOfPerson = this.value;
  if (nameOfPerson.length > 0) {
    nameOfPerson = nameOfPerson[0].toUpperCase() + nameOfPerson.substr(1).toLowerCase();
    this.value = nameOfPerson;
  }
}

<input type="text" id="nameOfPerson" onchange="formatting.call(this)" placeholder="type your name">

edited Jan 15 '17 at 06:46

answered Jan 15 '17 at 06:01

jackarms

1,343
7
14

1

What have you changes and why? Please explain. – Rajesh Jan 15 '17 at 06:04
Let's say the value entered in the input is: "hello"; The formatting should change the input value to: "Hello". @Rajesh – neologika desenvolvimento Jan 15 '17 at 06:14
3

@neologikadesenvolvimento I know what you are trying to achieve. My comment meant, SO is for everyone including beginners. So just putting code is not a good answer. You should explain **What and Why** you have changed so everyone gets it – Rajesh Jan 15 '17 at 06:16
Running the code found a error. Can you please check it? @jackarms – Ataur Rahman Munna Jan 15 '17 at 06:30
Okay, now I understand your comment. I'll edit my question and describe it better. Thank you :) @Rajesh – neologika desenvolvimento Jan 15 '17 at 06:30
As in Rajesh's answer it's usually best to not embed event handlers in the HTML, if you must do it you can all a `.call(this)` to bind the input element to `this` when the function is called. – jackarms Jan 15 '17 at 06:47

score 0 · Answer 2 · answered Jan 15 '17 at 06:08

0

If you want to do this using CSS, then this is the tricks:

 <input type="text" id="nameOfPerson" placeholder="type your name" style="text-transform: capitalize;">

CSS text-trasform property can change your input text as capitalize, lowercase and uppercase.

answered Jan 15 '17 at 06:08

Ataur Rahman Munna

3,887
1
23
34

1

This doesn't to anything for characters typed as capitals, e.g. FoOObAR stays capitalised as typed. – RobG Jan 15 '17 at 06:31

Rajesh · Answer 3 · 2017-01-16T05:53:33.990

A simple way to achieve this is:

nameOfPerson.charAt(0).toUpperCase() + nameOfPerson.substring(1);

When to do it?

Blur

You can do it when input looses focus(blur) event. This will allow user to input in any format and when he is done, then you apply your formatting.

function formatting() {
  var nameOfPerson = this.value
  this.value = nameOfPerson.charAt(0).toUpperCase() + nameOfPerson.substring(1).toLowerCase();
}

var input = document.getElementById("nameOfPerson");
input.addEventListener('blur', formatting)

<input type="text" id="nameOfPerson" placeholder="type your name">

Input

Or you can enforce formatting using input event. This will take care of typing and pasting actions.

function formatting() {
  var nameOfPerson = this.value
  this.value = nameOfPerson.charAt(0).toUpperCase() + nameOfPerson.substring(1).toLowerCase();
}

var input = document.getElementById("nameOfPerson");
input.addEventListener('input', formatting)

<input type="text" id="nameOfPerson" placeholder="type your name">

Pointers

Avoid binding handlers in HTML. Anyone can change DOM using dev tools and change behaviour of your page.
textContent as name suggest is used for text bindings and will return static text. Inputs have value binding and you should use .value
When you use onclange="formatting()", handler will not have context pointing to element and you will have to fetch it again and again and DOM queries are expensive. Using .addEventListener() will bind context and is preferred as you can add more than 1 handler.
In (nameOfPerson - nameOfPerson[0]), - operator will convert value to numeric value and would yield NaN. When dealing with strings, use string helper functions.

I agree it's best not to specify handlers in HTML, but only to increase modularity of your page. Anyone can also edit and rerun a page's Javascript. — jackarms, Jan 15 '17 at 06:50
OP asked that everything else be made lowercase. Perhaps add a .toLowerCase() after you substr so that your solution is complete — haxxxton, Jan 15 '17 at 22:08

Format input text to uppercase

3 Answers3

When to do it?

Linked