启用CapsLock时将输入更改为大写

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.

Answer 1

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

Answer 2

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>

Answer 3

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.