How do you automatically set text box to Uppercase?

Question

I am using the following style attribute to set the user input to uppercase so that when the user starts typing in the text box for example railway, then it should be altered to capital letters like RAILWAY without the user having to press the Caps-lock button.

This is the code I am using for the input:

<input type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="../images/tickmark.gif" border="0" style='text-transform:uppercase'/>

But I am not getting the desired output by using this attribute.

As mentioned below, be careful having spaces between = and values "text" — Jonathan Safa, Sep 15 '17 at 05:08
Does this answer your question? [Change Input to Upper Case](https://stackoverflow.com/questions/5757101/change-input-to-upper-case) — miken32, May 09 '23 at 16:26

score 366 · Accepted Answer · edited May 29 '22 at 23:29

366

You've put the style attribute on the <img> tag, instead of the <input>.

It is also not a good idea to have the spaces between the attribute name and the value...

<input type="text" class="normal" 
       name="Name" size="20" maxlength="20" 
       style="text-transform:uppercase" /> 
<img src="../images/tickmark.gif" border="0" />

Please note this transformation is purely visual, and does not change the text that is sent in POST.

NOTE: If you want to set the actual input value to uppercase and ensure that the text submitted by the form is in uppercase, you can use the following code:

<input oninput="this.value = this.value.toUpperCase()" />

edited May 29 '22 at 23:29

Kostas Minaidis

4,681
3
17
25

answered Jun 19 '12 at 11:35

freefaller

19,368
7
57
87

88

Note that if you send this data through a POST, it will send it however you typed it, not how it's shown on screen. – Vincent Poirier Jul 28 '15 at 19:04
@freefaller ,it changed all input to uppercase but inserting to mysql is lowercase text, how to change Capital letter! – Jack jdeoel Nov 11 '15 at 04:45
6

@David, see the previous comment. The transform is **purely** visual. It does not change the case of the underlying text that is sent back to the server. If you want to save the text in uppercase you must transform it on the server before saving – freefaller Nov 11 '15 at 17:20
7

This is not a full solution, since placeholder is now uppercase (which in most cases shouldn't be). There's no other way than using JavaScript. – tomericco Mar 22 '16 at 19:05
@DavidJawphan, do a UPPER() on the value before inserting into the table. – Zoran777 Apr 27 '16 at 20:10
1

Future readers that want the changes to be made on value instead of purely visual, see [Burak Tokak's answer](https://stackoverflow.com/a/37617376/3136474). – Dinei May 31 '17 at 20:15
@DavidJorHpan You shouldn't rely on client-side behavior. Always validate and sanitize on the server too. Otherwise someone with a non-spec or malicious client could easily crash your site. – Skylar Ittner Jul 02 '17 at 19:06
Thanks a lot. In additional, you can add culture info for other languages. ** or
**
– Oguzhan Kircali Sep 13 '17 at 11:38

Yehuda Schwartz · Answer 2 · 2023-03-21T20:51:47.540

I think the most robust solution that will insure that it is posted in uppercase is to use the oninput method inline like:

<input oninput="this.value = this.value.toUpperCase()" />

EDIT

Some people have been complaining that the cursor jumps to the end when editing the value, so this slightly expanded answer takes care of that

<input oninput="let p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p, p);" />

Burak Tokak · Answer 3 · 2021-09-27T08:04:47.293

47

The answers with the text-transformation:uppercase styling will not send uppercased data to the server on submit - what you might expect. You can do something like this instead:

For your input HTML use onkeydown:

<input name="yourInput" onkeydown="upperCaseF(this)"/>

In your JavaScript:

function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}

With upperCaseF() function on every key press down, the value of the input is going to turn into its uppercase form.

I also added a 1ms delay so that the function code block triggers after the keydown event occured.

UPDATE

Per recommendation from Dinei, you can use oninput event instead of onkeydown and get rid of setTimeout.

For your input HTML use oninput:

<input name="yourInput" oninput="this.value = this.value.toUpperCase()"/>

edited Sep 27 '21 at 08:04

answered Jun 03 '16 at 14:44

Burak Tokak

1,810
1
20
27

4

One could use [the `input` event](https://www.w3schools.com/jsref/event_oninput.asp) instead of `keydown` and get rid of the `setTimeout` workaround. – Dinei May 31 '17 at 20:12
1

This works, but how do you avoid the ugly split second lowercase to uppercase jump? – Jonathan Safa Sep 15 '17 at 05:07
@JonathanSafa you can't avoid it with this method, maybe you can have 2 input, one that you will be reading the type actions from user (which is hidden), and the other is for showing user, which will have uppercase version of the hidden input. But I don't think the jumpy letters are a big issue. – Burak Tokak Sep 15 '17 at 09:41
7

Going with the "input event" idea, adding this attribute to the `input` element seems to work well: `oninput="this.value = this.value.toUpperCase()"` – Tommy Stanton Sep 22 '17 at 01:04
3

@JonathanSafa Use this in addition to the `text-transform:uppercase` css style solution above to make the input always appear as uppercase – miknik Dec 28 '17 at 22:21
2

When a user edits existing text and puts the cursor somewhere other than the end, then the cursor will jump to the end with every character typed. Is there a way to preserve the cursor position as well as transforming the text to uppercase? – Mike Wodarczyk Sep 07 '18 at 16:57

score 22 · Answer 4 · answered Mar 22 '16 at 19:13

22

The problem with the first answer is that the placeholder will be uppercase too. In case you want ONLY the input to be uppercase, use the following solution.

In order to select only non-empty input element, put required attribute on the element:

<input type="text" id="name-input" placeholder="Enter symbol" required="required" />

Now, in order to select it, use the :valid pseudo-element:

#name-input:valid { text-transform: uppercase; }

This way you will uppercase only entered characters.

answered Mar 22 '16 at 19:13

tomericco

1,544
3
19
30

4

This answer doesn't work and doesn't make sense either. Why would a selection only if the input is valid affect the input text and not the placeholder? I guess if blank was not a valid value then this might work by chance. I used the answer here: http://stackoverflow.com/questions/25180140/make-input-value-uppercase-in-css-without-affecting-the-placeholder – Ben Thurley Aug 10 '16 at 16:37
6

My solution works great only for required text input fields. If you try to generalize it, it won't work. It answers the question above. You are probably asking a different question. – tomericco Aug 11 '16 at 08:05
This is a really useful solution, and is exactly what I needed. It won't fit every situation since it depends on the field being required, but it's definitely handy to have in the toolbox! – Tim Mackey Oct 31 '18 at 21:12

score 12 · Answer 5 · edited May 28 '18 at 16:44

12

try

<input type="text" class="normal" 
       style="text-transform:uppercase" 
       name="Name" size="20" maxlength="20"> 
 <img src="../images/tickmark.gif" border="0"/>

Instead of image put style tag on input because you are writing on input not on image

edited May 28 '18 at 16:44

Daniel Marín

1,369
14
36

answered Jun 19 '12 at 11:35

4

That, however, also makes the placeholder text uppercase. – Kazim Zaidi Feb 26 '16 at 15:23

score 9 · Answer 6 · edited Nov 16 '22 at 19:45

9

Set following style to set all textbox to uppercase:


    input { text-transform: uppercase; }

edited Nov 16 '22 at 19:45

Menai Ala Eddine - Aladdin

2,364
4
22
46

answered Jun 29 '16 at 06:04

Mukund Thakkar

1,225
14
19

score 4 · Answer 7 · answered Jul 06 '19 at 22:30

Using CSS text-transform: uppercase does not change the actual input but only changes its look. If you send the input data to a server it is still going to lowercase or however you entered it. To actually transform the input value you need to add javascript code as below:

document.querySelector("input").addEventListener("input", function(event) {
  event.target.value = event.target.value.toLocaleUpperCase()
})

<input>

Here I am using toLocaleUpperCase() to convert input value to uppercase. It works fine until you need to edit what you had entered, e.g. if you had entered ABCXYZ and now you try to change it to ABCLMNXYZ, it will become ABCLXYZMN because after every input the cursor jumps to the end.

To overcome this jumping of the cursor, we have to make following changes in our function:

document.querySelector("input").addEventListener("input", function(event) {
  var input = event.target;
  var start = input.selectionStart;
  var end = input.selectionEnd;
  input.value = input.value.toLocaleUpperCase();
  input.setSelectionRange(start, end);
})

<input>

Now everything works as expected, but if you have slow PC you may see text jumping from lowercase to uppercase as you type. If this annoys you, this is the time to use CSS, apply input: {text-transform: uppercase;} to CSS file and everything will be fine.

score 3 · Answer 8 · answered Mar 25 '18 at 11:20

The issue with CSS Styling is that it's not changing the data, and if you don't want to have a JS function then try...

<input onkeyup="this.value = this.value.toUpperCase()" />

on it's own you'll see the field capitalise on keyup, so it might be desirable to combine this with the style='text-transform:uppercase' others have suggested.

score 3 · Answer 9 · answered Oct 14 '22 at 14:16

3

IN HTML input tag just style it like follows

<input type="text" name="clientName" style="text-transform:uppercase" required>

in backed php/laravel use:

$name = strtoupper($clientName);

answered Oct 14 '22 at 14:16

It's VIN

152
7

score 2 · Answer 10 · answered Aug 18 '21 at 21:32

Various answers here have various problems, for what I was trying to achieve:

Just using text-transform changes the appearance but not the data. Using oninput or onkeydown changes the cursor position, so you can't, for instance, click in the middle of your existing input and edit it. Saving the position works, but just seemed a bit kludgey.

It felt cleaner to me to just break the problem up into two parts: upper-casing what I'm typing while I type (text-transform), and upper-casing the submitted data (run toUpperCase onchange):

<input id = "thing" onchange="this.value = this.value.toUpperCase(); pr()" style=text-transform:uppercase /><p>
<b><span id="result"></span></b>
<script>function pr() {document.getElementById("result").innerHTML = document.getElementById("thing").value}</script>

Type something in that, hit return or click out of the input, then click in the middle of your previous entry, add some lc text, hit return...

score 1 · Answer 11 · answered Apr 06 '18 at 15:51

This will both show the input in uppercase and send the input data through post in uppercase.

HTML

<input type="text" id="someInput">

JavaScript

var someInput = document.querySelector('#someInput');
someInput.addEventListener('input', function () {
    someInput.value = someInput.value.toUpperCase();
});

score 1 · Answer 12 · answered Mar 20 '19 at 15:07

As nobody suggested it:

If you want to use the CSS solution with lowercase placeholders, you just have to style the placeholders separately. Split the 2 placeholder styles for IE compatibility.

input {
    text-transform: uppercase;
}
input:-ms-input-placeholder {
    text-transform: none;
}
input::placeholder {
    text-transform: none;
}

The below input has lowercase characters, but all typed characters are CSS-uppercased :<br/>
<input type="text" placeholder="ex : ABC" />

score 1 · Answer 13 · answered Jun 22 '21 at 01:30

<input style="text-transform:uppercase" type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="../images/tickmark.gif" border="0"/>

I went with the style text-transform:uppercase thing from poster. Then I just did the uppercase thing in php as well. Some people working too hard with that javascript.

You were close with the style being in the wrong place. You were trying to uppercase an image instead of the input.

$name = strtoupper($_POST['Name']);

I don't know why I wanted to throw in some extra stuff if it's a php page. This is something I like to do make it smoother for the person filling out the form.

<input style="text-transform:uppercase" type = "text" class = "normal" name = "Name" size = "20" maxlength = "20" value="<?php echo $name; ?>"> <img src="../images/tickmark.gif" border="0"/>

That's assuming you're using PHP as the backend and posting to the same page you are on. This will keep the user from having to fill out that part of the form again. Less annoying for the person filling out the form.

score 0 · Answer 14 · answered Apr 06 '19 at 07:45

Try below solution, This will also take care when a user enters only blank space in the input field at the first index.

document.getElementById('capitalizeInput').addEventListener("keyup",   () => {
  var inputValue = document.getElementById('capitalizeInput')['value']; 
  if (inputValue[0] === ' ') {
      inputValue = '';
    } else if (inputValue) {
      inputValue = inputValue[0].toUpperCase() + inputValue.slice(1);
    }
document.getElementById('capitalizeInput')['value'] = inputValue;
});

<input type="text" id="capitalizeInput" autocomplete="off" />

score 0 · Answer 15 · edited Mar 10 '22 at 06:54

0

Just use this oninput in your input field:

<div class="form-group col-2">
<label>PINCODE</label>
<input type="number" name="pincode" id="pincode" class="form-control" minlength="6" maxlength="6" placeholder="Enter Pincode" oninput="this.value = this.value.toUpperCase()"  autocomplete="off"> 
</div>

edited Mar 10 '22 at 06:54

tripleee

175,061
34
275
318

answered Mar 10 '22 at 06:09

Shakti Singh Rathore

1
2

2

Given that there are 14 other answers, could you explain how your answer is meant to be better than the others? – David Buck Mar 10 '22 at 06:31

PABLO CESAR VEGA VALVERDE · Answer 16 · 2022-03-25T21:54:20.173

0

Just add in your input(style="text-transform:uppercase")

<input type="text" class="normal" style="text-transform:uppercase" name="Name" size="20" maxlength="20">

edited Mar 25 '22 at 21:54

answered Mar 25 '22 at 21:48

PABLO CESAR VEGA VALVERDE

11
2

score -3 · Answer 17 · answered Jun 25 '18 at 08:56

-3

<script type="text/javascript">
    function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}
</script>

<input type="text" required="" name="partno" class="form-control" placeholder="Enter a Part No*" onkeydown="upperCaseF(this)">

answered Jun 25 '18 at 08:56

SUDHAKAR ARUNACHALAM

21
2
6

7

How does this answer distinguish from all the one's already given? – Capricorn Jun 25 '18 at 09:15

How do you automatically set text box to Uppercase?

17 Answers17

Linked