Make a textarea all caps?

Question

I am trying to make a textarea that only will type in caps, even if the user isn't holding down shift or has caps lock on. Ideally this would accept the input no matter what and just automatically shift it to all caps. Most of the ways I am thinking of seem kind of clunky and would also show the lowercase before it gets converted.

Any suggestions or strategies?

Answer 1

you can use CSS

textarea { text-transform: uppercase; } 

however, this only renders on the browser. let's say if you want to inject the text into a script or db in the textarea as all caps then you'll have to use javascript's toUpperCase(); before injection or form submit.

here is the jsfiddle for example:

html:

<textarea>I really like jAvaScript</textarea> 

css:

textarea{  text-transform: uppercase; } 

javascript:

var myTextArea = document.getElementsByTagName('textarea');  for(var i=0; i<myTextArea.length; i++){     console.log('Textarea ' + i + ' output: ' + myTextArea[i].innerHTML);  //I really like jAvaScript     console.log('Textarea ' + i + ' converted output: ' + myTextArea[i].innerHTML.toUpperCase()); //I REALLY LIKE JAVASCRIPT } 

Answer 2

CSS:

textarea { text-transform: uppercase; }