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    lt input type    text  class    normal  name    Name  size    20  maxlength    20  gt   lt img src     images tickmark gif  border  0  style  text-transform uppercase   gt    But I am not getting the desired output by using this attribute

User · Answer

Set following style to set all textbox to uppercase  input  text-transform  uppercase

User · Answer

lt script type  text javascript  gt      function upperCaseF a       setTimeout function            a value   a value toUpperCase           1      lt  script gt    lt input type  text  required    name  partno  class  form-control  placeholder  Enter a Part No   onkeydown  upperCaseF this   gt

User · Answer

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   lt br  gt  x000D   lt input type  text  placeholder  ex   ABC    gt  x000D   x000D   x000D

User · Answer

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      lt input onkeyup  this value   this value toUpperCase      gt   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

User · Answer

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    lt input type  text  id  name-input  placeholder  Enter symbol  required  required    gt    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

User · Answer

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   lt input name  quot yourInput quot  onkeydown  quot upperCaseF this  quot   gt   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   lt input name  quot yourInput quot  oninput  quot this value   this value toUpperCase   quot   gt

User · Answer

This will both show the input in uppercase and send the input data through post in uppercase   HTML   lt input type  text  id  someInput  gt    JavaScript  var someInput   document querySelector   someInput    someInput addEventListener  input   function          someInput value   someInput value toUpperCase

User · Answer

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   lt input oninput  this value   this value toUpperCase      gt  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   lt input oninput  let p this selectionStart this value this value toUpperCase   this setSelectionRange p  p      gt  x000D   x000D   x000D

User · Answer

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          gt    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   lt input type  text  id  capitalizeInput  autocomplete  off    gt  x000D   x000D   x000D

User · Answer

You ve put the style attribute on the  lt img gt  tag  instead of the  lt input gt    It is also not a good idea to have the spaces between the attribute name and the value      lt input type  text  class  normal          name  Name  size  20  maxlength  20          style  text-transform uppercase    gt    lt img src     images tickmark gif  border  0    gt    Please note this transformation is purely visual  and does not change the text that is sent in POST

User · Answer

try   lt input type  text  class  normal          style  text-transform uppercase          name  Name  size  20  maxlength  20  gt     lt img src     images tickmark gif  border  0   gt    Instead of image put style tag on input because you are writing on input not on image

User · Answer

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   lt input gt  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   lt input gt  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

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

Examples related to html