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; }

Answer 3

Quintin,

Create a style in your CSS such as the following:

textarea{ text-transform:uppercase; }

Answer 4

Try adding a

textarea{
   text-transform: uppercase;
}

to the text area.

Answer 5

添加你可以得到它CSS：

textarea { text-transform: uppercase; }

Answer 6

This can be achieved with the oninput attribute, like so:

<textarea oninput="this.value = this.value.toUpperCase()">

 <label for="upperCaseTextArea" style="display:block;"> Upper Case Text Area </label> <textarea id="upperCaseTextArea" name="upperCaseText" rows="5" cols="15" oninput="this.value=this.value.toUpperCase()" > </textarea>