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

Answer 1

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.

Answer 2

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

Answer 3

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 version should resolve that

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

Answer 4

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

Answer 5

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

Answer 6

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