How to change lowercase chars to uppercase using the keyup event

Question

My goal is to use the jQuery event  keyup   to convert inputted lowercase chars to uppercase   How can I achieve this

User · Answer

document  ready function             yourtext   keyup function                   this  val   this  val   toUpperCase                   lt textarea id  yourtext  rows  5  cols  20  gt  lt  textarea gt

User · Answer

As placeholder text is becoming more commonly supported  this update may be relevant   My issue with the other answers is that applying the text-transform  uppercase css would also uppercase the placeholder text  which we didn t want   To work around this  it was a little tricky but worth the net effect    Create the text-uppercase class    text-uppercase       text-transform uppercase     Bind to the keydown event   Binding to the keydown event was important to get the class to be added before the character was visible  Binding to keypress or keyup left the brief flicker of the lowercase letter      input   on  keydown   function e           Visually Friendly Auto-Uppercase     var  this     this           1  Length of 1  hitting backspace  remove class      if   this val   length    1  amp  amp  e which    8                 this removeClass  text-uppercase                  2  Length of 0  hitting character  add class      if   this val   length    0  amp  amp  e which  gt   65  amp  amp  e which  lt   90                 this addClass  text-uppercase               Transform to uppercase when submitting to server   var myValue   this value toUpperCase       YMMV  you may find that cutting text or deleting text with the delete key may not remove the class  You can modify the keydown to also take the delete character into account   Also  if you only have one character  and your current cursor position is in position 0  hitting backspace will remove the text-transform class  but since the cursor position is in position 0  it doesn t delete the single character   This would require a bit more work to also check the current character position and determine if the delete or backspace key will actually delete the single remaining character   Although it was worth the extra effort to make this seemless and visually appealing for our most common use case  going beyond this wasn t necessary

User · Answer

Solution 1  Elegant approach with great user experience   HTML   lt input id  inputID  class  uppercase  name  inputName  value      gt    CSS   uppercase      text-transform  uppercase      JS       inputID   on  blur   function        this value   this value toUpperCase          By using CSS text-transform  uppercase  you ll eliminate the animation of lower to uppercase as the user types into the field   Use blur event to handle converting to uppercase  This happens behind the scene as CSS took care of the user s visually appealing masking   Solution 2  Great  but less elegant   If you insist on using keyup  here it is         inputID   on  keyup   function        var caretPos   this selectionStart      this value   this value toUpperCase        this setSelectionRange caretPos  caretPos         User would notice the animation of lowercase to uppercase as they type into the field  It gets the job done   Solution 3  Just get the job done       inputID   on  keyup   function        this value   this value toUpperCase          This method is most commonly suggested but I do not recommend   The downside of this solution is you ll be annoying the user as the cursor s caret position keeps jumping to the end of the text after every key input  Unless you know your users will never encounter typos or they will always clear the text and retype every single time  this method works

User · Answer

The only issue with changing user input on the fly like this is how disconcerting it can look to the end user  they ll briefly see the lowercase chars jump to uppercase    What you may want to consider instead is applying the following CSS style to the input field   text-transform  uppercase    That way  any text entered always appears in uppercase   The only drawback is that this is a purely visual change - the value of the input control  when viewed in the code behind  will retain the case as it was originally entered   Simple to get around this though  force the input val    toUpperCase    then you ve got the best of both worlds

User · Answer

This worked for me   jQuery document  ready function             jQuery  input   keyup function                 this value   this value toLocaleUpperCase                        jQuery  textarea   keyup function                 this value   this value toLocaleUpperCase

User · Answer

I success use this code to change uppercase     document  ready function        kode   keyup function           this  val   this  val   toUpperCase              lt  script gt    in your html tag bootstraps    lt div class  form-group  gt                               lt label class  control-label col-md-3  gt Kode lt  label gt                               lt div class  col-md-9 col-sm-9 col-xs-12  gt                                   lt input name  kode  placeholder  Kode matakul  id  kode  class  form-control col-md-7 col-xs-12  type  text  required  required  maxlength  15  gt                                   lt span class  fa fa-user form-control-feedback right  aria-hidden  true  gt  lt  span gt                               lt  div gt                           lt  div gt

User · Answer

Let say your html code is     lt input type  text  id  txtMyText    gt    then the jquery should be        txtMyText   keyup function       this value   this value toUpperCase

User · Answer

I work with telerik radcontrols that s why I Find a control  but you can find control directly like           IdExample   css    this code works for me  I hope help you and sorry my english    Code Javascript     lt script type  javascript  gt   function changeToUpperCase event  obj    var txtDescripcion         RadPanelBar1 Items 0  Items 0  FindControl  txtDescripcion   ClientID  gt                  txtDescripcion css                     text-transform    uppercase                      lt  script gt    Code ASP NET       lt asp TextBox ID  txtDescripcion  runat  server  MaxLength  80  Width  500px                                                              onkeypress  return changeToUpperCase event this   gt  lt  asp TextBox gt

User · Answer

jQuery  var inputs       foo     inputs each function              this style textTransform    uppercase                     keyup function              this value   this value toUpperCase                  Set the input s style to capitals  so user doesn t see the change  Automatically adjust the value  so the user doesn t have to hold shift or use caps lock

User · Answer

Plain ol  javascript   var input   document getElementById  inputID     input onkeyup   function        this value   this value toUpperCase        Javascript with jQuery       inputID   keyup function        this value   this value toUpperCase

User · Answer

Make sure that the field has this attribute in its html    x000D   x000D  ClientIDMode  Static  x000D   x000D   x000D    and then use this in your script    x000D   x000D      NameOfYourTextBox   change function      x000D                     this  val   this  val   toUpperCase     x000D                   x000D   x000D   x000D

User · Answer

Above answers are pretty good  just wanted to add short form for this    lt input type  text  name  input text   onKeyUP  this value   this value toUpperCase     gt

[javascript] How to change lowercase chars to uppercase using the 'keyup' event?

Examples related to javascript

Examples related to jquery