Change input to Upper Case with CapsLock on

Question

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.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform — epascarello, Oct 02 '17 at 11:57
https://stackoverflow.com/questions/348792/how-do-you-tell-if-caps-lock-is-on-using-javascript — epascarello, Oct 02 '17 at 11:59
@epascarello might be a case where i tell the user caps is on? — Ylama, Oct 02 '17 at 12:01

Naren Murali · Accepted Answer · 2017-10-02T13:43:23.910

2

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" />

For multiple elements with class test

var elements = document.getElementsByClassName("test");

function change() {
  var arr = this.value.split(" ").map(function(x) {
    return x.charAt(0).toUpperCase() + x.slice(1).toLowerCase()
  });
  this.value = arr.join(" ");
}


for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener("change", change);
  elements[i].addEventListener("keyup", change);
}

<input placeholder="Brand Name" class="test" type="text" />
<input placeholder="Brand Name" class="test" type="text" />
<input placeholder="Brand Name" class="test" type="text" />
<input placeholder="Brand Name" class="test" type="text" />
<input placeholder="Brand Name" class="test" type="text" />
<input placeholder="Brand Name" class="test" type="text" />

edited Oct 02 '17 at 13:43

answered Oct 02 '17 at 12:21

Naren Murali

19,250
3
27
54

why does this not work for `var id = document.getElementsByClassName("test");` getting value by class? – Ylama Oct 02 '17 at 13:37
i would like to implement this on a class where its based on more than one input field and not add an id to each input field, to repetitive. – Ylama Oct 02 '17 at 13:39
@Ylama Did you set class to `test`? – Naren Murali Oct 02 '17 at 13:39
yess i did.. and added it to more than one input field. – Ylama Oct 02 '17 at 13:40
` ` AND ` ` – Ylama Oct 02 '17 at 13:43

cmprogram · Answer 2 · 2017-10-02T12:25:49.400

style="text-transform: capitalize"

(Question was edited. New Answer.)

Give your input an id, for this example let's say it's called "theInputId". Then add an onkeypress event to it also and call the function script I've listed below.

<input placeholder="Brand Name" style="text-transform: capitalized" 
 type="text" id="theInputId" onkeypress="capsLock(event)">


<script>
//Script to check if Caps Lock is on.
function capLock(e){
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk)){
document.getElementById('theInputId').style.textTransform = 'lowercase'
document.getElementById('theInputId').style.textTransform = 'capitalize'
}
}
</script>

score 1 · Answer 3 · answered Oct 02 '17 at 12:00

1

Do you want to enter all the text capitalized in the input? then u can use text-transform:uppercase in css and if u want to change it while typing you can use toUpperCase() on keyup of that input.

answered Oct 02 '17 at 12:00

nikita

404
3
8

sorry capitalized dont work, i edited my question.. was a typo for the inline styling – Ylama Oct 02 '17 at 12:03

Change input to Upper Case with CapsLock on

3 Answers3