Change Input to Upper Case

Question

JS     lt script type  text css  gt    function             upper   keyup function             this value   this value toUpperCase                 lt  script gt    HTML   lt div id  search  gt           lt input type  radio  name  table  class  table  value  professor  tabindex  1    gt  Professor          lt input type  radio  name  table  class  table  value  department  tabindex  2    gt  Department          lt input type  radio  name  table  id  upper  class  table  value  course  tabindex  3    gt  Course          lt input type  text  name  search  class  keywords  value  Select an option     onclick  this value      onfocus  this select    onblur  this value  this value   this value   tabindex  4     gt           lt div id  content  gt   lt  div gt       lt  div gt    Why is this still not working   Just trying to call div   keywords  from JS

User · Answer

Solutions using value toUpperCase seem to have the problem that typing text into the field resets the cursor position to the end of the text  Solutions using text-transform seem to have the problem that the text submitted to the server is still potentially lowercase  This solution avoids those problems    x000D   x000D  function handleInput e    x000D     var ss   e target selectionStart  x000D     var se   e target selectionEnd  x000D     e target value   e target value toUpperCase    x000D     e target selectionStart   ss  x000D     e target selectionEnd   se  x000D    x000D   lt input type  text  id  txtTest  oninput  handleInput event     gt  x000D   x000D   x000D

User · Answer

JAVA SCRIPT    lt html gt   lt body gt   lt script gt  function  ToCaps obj    obj value obj value toUpperCase       lt  script gt   lt input type  text  onkeyup  ToCaps this    gt   lt  body gt   lt  html gt     ASP NET   Use a css style on the text box  write css like this     ToCaps   text-transform  uppercase      lt asp TextBox ID  TextBox1  runat  server  CssClass  ToCaps  gt  lt  asp Te writxtBox gt     OR   simply write this code in textbox  lt asp TextBox ID  TextBox1  runat  server  style  text-transform uppercase  gt  lt  asp TextBox gt       1 Note you don t get intelligence until you type up to style

User · Answer

This answer has a problem   style  text-transform  uppercase    it also converts the place holder word to upper case which is inconvenient  placeholder  first name    when rendering the input  it writes  first name  placeholder as uppercase  FIRST NAME   so i wrote something better   onkeypress  this value   this value   event key toUpperCase    return false     it works good   but it has some side effects if your javascript code is complex    hope it helps somebody to give him her an idea to develop a better solution

User · Answer

onBlur  javascript  this value   this value toUpperCase        will change uppercase easily   Demo Here

User · Answer

Here we use onkeyup event in input field which triggered when the user releases a Key  And here we change our value to uppercase by toUpperCase   function    Note that  text-transform  Uppercase  will only change the text in style  but not it s value  So In order to change value  Use this inline code that will show as well as change the value   lt input id  test-input  type    name    onkeyup  this value   this value toUpperCase     gt   Here is the code snippet that proved the value is change  x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D    lt title gt  lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D    lt form method  get  action    gt  x000D     lt input id  test-input  type    name    onkeyup  this value   this value toUpperCase     gt  x000D     lt input type  button  name    value  Submit  onclick  checking    gt  x000D    lt  form gt  x000D    lt script type  text javascript  gt  x000D    function checking argument    x000D        body    x000D     var x   document getElementById  test-input   value x000D     alert x   x000D      x000D     x000D     x000D    lt  script gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Javascript has a toUpperCase   method  http   www w3schools com jsref jsref toUpperCase asp  So wherever you think best to put it in your code  you would have to do something like        keywords   val   toUpperCase

User · Answer

I couldn t find the text-uppercase in Bootstrap referred to in one of the answers  No matter  I created it    text-uppercase     text-transform  uppercase      This displays text in uppercase  but the underlying data is not transformed in this way  So in jquery I have       text-uppercase   keyup function          this value   this value toLocaleUpperCase          This will change the underlying data wherever you use the text-uppercase class

User · Answer

If you purpose it to a html input  you can easily do this without the use of JavaScript  or any other JS libraries  It would be standard and very easy to use a CSS tag text-transform    lt input type  text  style  text-transform  uppercase   gt    or you can use a bootstrap class named as  text-uppercase    lt input type  text  class  text-uppercase   gt    In this manner  your code is much simpler

User · Answer

Can also do it this way but other ways seem better  this comes in handy if you only need it the once   onkeyup  this value   this value toUpperCase

User · Answer

you can try this HTML   lt input id  pan  onkeyup  inUpper      gt    javaScript  function    x       return document getElementById  x           convert text in upper case   function inUpper            pan   value      pan   value toUpperCase

User · Answer

try       search input keywords   bind  change   function          this value toUpperCase          EDIT  As  Mike Samuel suggested  this will be more appropriate for the job     this value   this value toLocaleUpperCase

User · Answer

Javascript string objects have a toLocaleUpperCase   function that makes the conversion itself easy   Here s an example of live capitalisation     function            input   keyup function             this value   this value toLocaleUpperCase                    Unfortunately  this resets the textbox contents completely  so the user s caret position  if not  the end of the textbox   is lost   You can hack this back in  though  with some browser-switching magic      Thanks http   blog vishalon net index php javascript-getting-and-setting-caret-position-in-textarea  function getCaretPosition ctrl        var CaretPos   0        IE Support     if  document selection            ctrl focus            var Sel   document selection createRange            Sel moveStart  character   -ctrl value length           CaretPos   Sel text length               Firefox support     else if  ctrl selectionStart    ctrl selectionStart     0             CaretPos   ctrl selectionStart             return CaretPos     function setCaretPosition ctrl  pos        if  ctrl setSelectionRange            ctrl focus            ctrl setSelectionRange pos pos             else if  ctrl createTextRange            var range   ctrl createTextRange            range collapse true           range moveEnd  character   pos           range moveStart  character   pos           range select                 The real work    function            input   keyup function                Remember original caret position         var caretPosition   getCaretPosition this               Uppercase-ize contents         this value   this value toLocaleUpperCase                Reset caret position             we ignore selection length  as typing deselects anyway          setCaretPosition this  caretPosition                   Ultimately  it might be easiest to fake it  Set the style text-transform  uppercase on the textbox so that it appears uppercase to the user  then in your Javascript apply the text transformation once whenever the user s caret focus leaves the textbox entirely   HTML    lt input type  text  name  keywords  class  uppercase    gt    CSS   input uppercase   text-transform  uppercase      Javascript     function            input   focusout function                Uppercase-ize contents         this value   this value toLocaleUpperCase                  Hope this helps

User · Answer

I think the most elegant way is without any javascript but with css  You can use text-transform  uppercase  this is inline just for the idea     lt input id  yourid  style  text-transform  uppercase  type  text    gt    Edit   So  in your case  if you want keywords to be uppercase change  keywords      keywords   val    to     keywords   val   toUpperCase

User · Answer

I think the most easiest way to do is by using Bootstrap s class   text-uppercase     lt input type  text  class  text-uppercase    gt

User · Answer

lt input id  name  data-upper type  text   gt   lt input id  middle  data-upper type  text   gt   lt input id  sur  data-upper type  text   gt       Upper the text on dynamically created element which has attribute   upper and when keyup action happens     document body  on  keyup     data-upper    function toUpper       this value   this value toUpperCase

[javascript] Change Input to Upper Case

Examples related to javascript

Examples related to jquery