With jQuery how do I capitalize the first letter of a text field while the user is still editing that field

Question

I m looking for an example of how to capitalize the first letter of a string being entered into a text field   Normally  this is done on the entire field with a function  regex  OnBlur  OnChange  etc  I want to capitalize the first letter while the user is still typing   For instance  if I m typing the word  cat   the user should press  c   and then by the time he presses  a   the C should be capitalized in the field     I think what I m going for might be possible with keyup or keypress but I m not sure where to start     Anyone have an example for me

User · Answer

It s very cool you can capitalize Only the first letter of an input field With this one   If any one know how to capitalize Like CSS text-transform capitalize  Please Reply    Here You go       input-field   keyup function event              this  val    this  val   substr 0 1  toUpperCase       this  val   substr 1

User · Answer

Just use CSS      myclass        text-transform capitalize

User · Answer

This will simply transform you first letter of text   yourtext substr 0 1  toUpperCase   yourtext substr 1

User · Answer

I used the code of  Spajus and wrote a more extended jQuery plugin   I wrote these four jQuery functions    upperFirstAll   to capitalize ALL words in an inputfield upperFirst   to capitalize only the FIRST word upperCase   to convert the hole text to upper case lowerCase   to convert the hole text to lower case   You can use and chain them like any other jQuery function      firstname   upperFirstAll    My complete jQuery plugin    function             fn extend           With every keystroke capitalize first letter of ALL words in the text     upperFirstAll  function               this  keyup function event                var box   event target              var txt     this  val                var start   box selectionStart              var end   box selectionEnd                 this  val txt toLowerCase   replace         s  -     g              function c                    return c toUpperCase                                 box setSelectionRange start  end                       return this                 With every keystroke capitalize first letter of the FIRST word in the text     upperFirst  function               this  keyup function event                var box   event target              var txt     this  val                var start   box selectionStart              var end   box selectionEnd                 this  val txt toLowerCase   replace       g              function c                    return c toUpperCase                                 box setSelectionRange start  end                       return this                 Converts with every keystroke the hole text to lowercase     lowerCase  function               this  keyup function event                var box   event target              var txt     this  val                var start   box selectionStart              var end   box selectionEnd                 this  val txt toLowerCase                 box setSelectionRange start  end                       return this                 Converts with every keystroke the hole text to uppercase     upperCase  function               this  keyup function event                var box   event target              var txt     this  val                var start   box selectionStart              var end   box selectionEnd                 this  val txt toUpperCase                 box setSelectionRange start  end                       return this                   jQuery      Groetjes

User · Answer

My appologies  The syntax was off due to me being in a hurry and sloppy   Here you go              tester   live  keyup   function  evt                        var txt     this  val                txt   txt substring 0  1  toUpperCase     txt substring 1                 this  val txt                 Simple but works  You would def want to make this more general and plug and playable  This is just to offer another idea  with less code  My philosophy with coding  is making it as general as possible  and with as less code as possible   Hope this helps  Happy coding

User · Answer

input type  text     keyup function evt       var txt     this  val             Regex taken from php js  http   phpjs org functions ucwords 569        this  val txt replace        s    g  function  1   return  1 toUpperCase

User · Answer

I answered this somewhere else   However  here are two function you might want to call on  keyup event   To capitalize first word    function ucfirst str force             str force   str toLowerCase     str            return str replace    b   a-zA-Z                        function firstLetter                         return   firstLetter toUpperCase                                    And to  capitalize all words   function ucwords str force     str force   str toLowerCase     str      return str replace    b   a-zA-Z   g             function firstLetter                 return   firstLetter toUpperCase                       As  Darrell Suggested     input type  text     keyup function evt             force  true to lower case all letter except first       var cp value  ucfirst   this  val   true              to capitalize all words           var cp value  ucwords   this  val   true              this  val cp value              Hope this is helpful   Cheers

User · Answer

Slight update to cumul s solution   The function upperFirstAll doesn t work properly if there is more than one space between words  Replace the regular expression for this one to solve it     this  val txt toLowerCase   replace         s  -      g

User · Answer

test   keyup       function               this value   this value substr 0  1  toUpperCase     this value substr 1  toLowerCase

User · Answer

With Javascript you can use   yourtext substr 0 1  toUpperCase   yourtext substr 1     If by chance you re generating your web page with PHP you can also use    lt   ucfirst  your text   gt

User · Answer

CSS solution with  text-transform  capitalize   is no good if you want to use the contents of the input in backend  You will still receive data as-is  JavaScript solves this issue   JQuery plugin combined from some of the techniques mentioned earlier  plus it capitalizes words after hyphens  i e    Tro Lo-Lo    Add to your script   jQuery fn capitalize   function           this 0   keyup function event            var box   event target          var txt     this  val            var stringStart   box selectionStart          var stringEnd   box selectionEnd            this  val txt replace         s  -     g  function  word                return  word toUpperCase                         box setSelectionRange stringStart   stringEnd               return this      Then just attach capitalize   to any selector       myform input   capitalize

User · Answer

first-character          font-weight bold          color  F00          text-transform capitalize        capital-text      text-transform uppercase

User · Answer

My attempt   Only acts if all text is lowercase or all uppercase  uses Locale case conversion  Attempts to respect intentional case difference or a   or   in names  Happens on Blur as to not cause annoyances on phones  Although left in selection start end so if changed to keyup maybe useful still  Should work on phones but have not tried     fn capitalize   function           this  blur function event            var box   event target          var txt     this  val            var lc   txt toLocaleLowerCase            var startingWithLowerCaseLetterRegex   new RegExp   b  a-z      g            if      -      test txt   amp  amp  txt     lc    txt     txt toLocaleUpperCase                  var stringStart   box selectionStart              var stringEnd   box selectionEnd                this  val lc replace startingWithLowerCaseLetterRegex  function c    return c toLocaleUpperCase      trim                 box setSelectionRange stringStart  stringEnd                        return this        Usage     input type text  capitalize   capitalize

User · Answer

Slight update to the code above to force the string to lower before Capitaliing the first letter    Both use Jquery syntax       function CapitaliseFirstLetter elemId            var txt           elemId  val   toLowerCase                    elemId  val txt replace        s    g  function  1            return  1 toUpperCase                     In addition a function to Capitalise the WHOLE string       function CapitaliseAllText elemId             var txt           elemId  val                     elemId  val txt toUpperCase                  Syntax to use on a textbox s click event       onClick  CapitaliseFirstLetter  myTextboxId    return false

User · Answer

Jquery or Javascipt doesn t provide a built-in method to achieve this   CSS test transform  text-transform capitalize   doesn t really capitalize the string s data but shows a capitalized rendering on the screen   If you are looking for a more legit way of achieving this in the data level using plain vanillaJS  use this solution     var capitalizeString   function  word            word   word toLowerCase        if  word indexOf         -1       passed param contains 1   words         word   word replace   s g   --            var result     camelCase  -    word           return result replace  - g              else       return   camelCase  -    word

User · Answer

My personal favorite when using jQuery is short and sweet   function capitalize word       return   camelCase  -    word       There s a jQuery plugin that does this too  I ll call it    jCap js    fn extend           capitalize  function             return   camelCase  -  arguments 0

User · Answer

A turkish one  If someone is still interested       input type  text     keyup function           this  val   this  val   replace     a-zA-Z s       s i i g          S I G       s   a-zA-Z s       s i i g          S I G      g  function   1            if   1     i               return  I           else if   1      i               return   I           return  1 toUpperCase

User · Answer

I use both CSS and jQuery solutions when achieving this  This will change both how it appears in the browser and the data value  A simple solution  that just works   CSS   field       text-transform  capitalize      jQuery      field   keyup function         var caps   jQuery   field   val         caps   caps charAt 0  toUpperCase     caps slice 1       jQuery   field   val caps

User · Answer

A solution that accept exceptions passed by parameters    Copy the below code and use it like this     myselector   maskOwnName   of    on    a    as    at    for    in    to       function            fn maskOwnName   function not capitalize                not capitalize     not capitalize instanceof Array       not capitalize             this  keypress function e               if e altKey    e ctrlKey                  return               var new char   String fromCharCode e which  toLowerCase                 if   a-z  -          test new char     e keyCode    8                   var start   this selectionStart                      end   this selectionEnd                   if e keyCode    8                       if start    end                          start--                       new char                                          var new value    this value slice 0  start   new char  this value slice end   join                      var maxlength   this getAttribute  maxlength                    var words   new value split                       start    new char length                  end   start                   if maxlength     null    new value length  lt   maxlength                      e preventDefault                    else                     return                   for  var i   0  i  lt  words length  i                         words i    words i  toLowerCase                         if not capitalize indexOf words i      -1                          words i    words i  substring 0 1  toUpperCase     words i  substring 1 words i  length  toLowerCase                                       this value   words join                       this setSelectionRange start  end                                          fn maskLowerName   function pos              this  css  text-transform    lowercase   bind  blur change   function                this value   this value toLowerCase                             fn maskUpperName   function pos              this  css  text-transform    uppercase   bind  blur change   function                this value   this value toUpperCase                         jQuery

User · Answer

this will help you in - convert first letter of each word to uppercase   lt script gt       convert First Letter UpperCase          txtField   on  keyup   function  e        var txt     this  val          this  val txt replace        s    g  function   1          return  1 toUpperCase                     lt  script gt    Example   this is a title case sentence -  This Is A Title Case Sentence

User · Answer

If using Bootstrap  add   class  text-capitalize    For example    lt input type  text  class  form-control text-capitalize  placeholder  Full Name  value    gt

[javascript] With jQuery, how do I capitalize the first letter of a text field while the user is still editing that field?

Examples related to javascript

Examples related to jquery

Examples related to capitalization