Ylama Ylama - 1 year ago 134
CSS Question

Change input to Upper Case with CapsLock on

I would just like to know is it possible to change the input automatically to

capitalized
on a certain
input
field where the user entered a value with Caps Lock on.

<input placeholder="Brand Name" style="text-transform: capitalized" type="text" />


Caps On = TEST NAME

Expected: Test Name

<input placeholder="Brand Name" style="text-transform: capitalized" type="text" />


Caps Off = test name

Default: Test Name

I know some Names looks like
Reader Van der Bank
where not all the name parts are capitalized, but still would like to know if its possible. Thanks

Alternative : Think i might be using a php function to transform everything to lowercase and then capitalized.

Answer Source

Here is a javascript function to do that, if there is no CSS solution for it.

var id = document.getElementById("test");

function change() {
  var arr = id.value.split(" ").map(function(x) {
    return x.charAt(0).toUpperCase() + x.slice(1).toLowerCase()
  });
  id.value = arr.join(" ");
}
id.addEventListener("change", change);
id.addEventListener("keyup", change);
<input placeholder="Brand Name" id="test" type="text" />

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download