[html] How do you automatically set text box to Uppercase?

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.

This question is related to html

The answer is


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:

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

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:

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

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.


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.

_x000D_
_x000D_
input {_x000D_
    text-transform: uppercase;_x000D_
}_x000D_
input:-ms-input-placeholder {_x000D_
    text-transform: none;_x000D_
}_x000D_
input::placeholder {_x000D_
    text-transform: none;_x000D_
}
_x000D_
The below input has lowercase characters, but all typed characters are CSS-uppercased :<br/>_x000D_
<input type="text" placeholder="ex : ABC" />
_x000D_
_x000D_
_x000D_


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 remommendation 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()"/>

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


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

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

EDIT

Some people have been complaining that the cursor jumps to the end when editing the value, so this slightly expanded version should resolve that

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


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

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.


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

_x000D_
_x000D_
document.getElementById('capitalizeInput').addEventListener("keyup",   () => {_x000D_
  var inputValue = document.getElementById('capitalizeInput')['value']; _x000D_
  if (inputValue[0] === ' ') {_x000D_
      inputValue = '';_x000D_
    } else if (inputValue) {_x000D_
      inputValue = inputValue[0].toUpperCase() + inputValue.slice(1);_x000D_
    }_x000D_
document.getElementById('capitalizeInput')['value'] = inputValue;_x000D_
});
_x000D_
<input type="text" id="capitalizeInput" autocomplete="off" />
_x000D_
_x000D_
_x000D_


Set following style to set all textbox to uppercase

input {text-transform: uppercase;}

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

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.