With jQuery, how can I use the first letter of a text field while the user is still editing this field?

Question

I am looking for an example of how the capital letter of the first line of a line is entered in a text box. Usually this is done in the whole field with function, regular expression, OnBlur , OnChange , etc. I want to use the first letter while the user is still typing.

For example, if I type the word "cat", the user must press "c", and then while he press "a", C should be capitalized in the field.

I think that what I am going to do is possibly using keyup or keypress , but I'm not sure where to start.

Does anyone have an example for me?

Answer 1

Just use CSS.

 .myclass { text-transform:capitalize; } 

Answer 2

It just converts your first letter of text:

yourtext.substr(0,1).toUpperCase()+yourtext.substr(1);

Answer 3

I answered it somewhere else. However, here are two functions you can call the keyup event.

To make amends for the 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 use all the words

 function ucwords(str,force){ str=force ? str.toLowerCase() : str; return str.replace(/(\b)([a-zA-Z])/g, function(firstLetter){ return firstLetter.toUpperCase(); }); } 

Like @ 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 will be helpful

Greetings :)

Answer 4

 $('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( ); })); }); 

Answer 5

CSS solution with "text-transform: capitalize;" it’s not good if you want to use the contents of the backend login. You will still receive the data as is. JavaScript solves this problem.

The jQuery plugin, combined with some of the methods mentioned above, plus it smooths words after hyphens, ie: "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 capizeize () to any selector:

 $('#myform input').capitalize(); 

Answer 6

I used @Spajus code and wrote a more advanced jQuery plugin.

I wrote these four jQuery functions:

• upperFirstAll() to use all words in the input field
• upperFirst() to use only the first word
• upperCase() to convert hole text to uppercase
• lowerCase() to convert hole text to lowercase

You can use and bind 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 :)

Answer 7

My personal favorite when using jQuery is short and sweet:

 function capitalize(word) { return $.camelCase("-" + word); } 

There is also a jQuery plugin. I will call it ... jCap.js

 $.fn.extend($, { capitalize: function() { return $.camelCase("-"+arguments[0]); } }); 

Answer 8

  $("#test").keyup( function () { this.value = this.value.substr(0, 1).toUpperCase() + this.value.substr(1).toLowerCase(); } ); 

Answer 9

Slightly update the code above to make the line go down before smoothing 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, the WHOLE header line function:

  function CapitaliseAllText(elemId) { var txt = $("#" + elemId).val(); $("#" + elemId).val(txt.toUpperCase()); } 

The syntax for use in a text field click event is:

  onClick="CapitaliseFirstLetter('myTextboxId'); return false" 

Answer 10

My addictions. The syntax was disabled due to the fact that I was in a hurry and messy. 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 not want to make it more general, plug and play. This is just to propose another idea, with less code. My coding philosophy makes it as general as possible with less code.

Hope this helps. Happy coding! :)

Answer 11

It is very cool that you can use only the first letter of the input field. With this. If anyone knows how to capitalize. Like CSS text-transform: capize, Please Reply .. Here you go ..

$('input-field').keyup(function(event) { $(this).val(($(this).val().substr(0,1).toUpperCase())+($(this).val().substr(1))); });

Answer 12

Turkish. If anyone is still interested.

  $('input[type="text"]').keyup(function() { $(this).val($(this).val().replace(/^([a-zA-Z\s\ö\ç\ş\ı\i\ğ\ü\Ö\Ç\Ş\İ\Ğ\Ü])|\s+([a-zA-Z\s\ö\ç\ş\ı\i\ğ\ü\Ö\Ç\Ş\İ\Ğ\Ü])/g, function ($1) { if ($1 == "i") return "İ"; else if ($1 == " i") return " İ"; return $1.toUpperCase(); })); }); 

Answer 13

this will help you convert the first letter of each word to uppercase.

 <script> /* convert First Letter UpperCase */ $('#txtField').on('keyup', function (e) { var txt = $(this).val(); $(this).val(txt.replace(/^(.)|\s(.)/g, function ($1) { return $1.toUpperCase( ); })); }); </script> 

Example: this sentence for the case with the heading → This Is A Name Case Sentence

Answer 14

The decision accepting exceptions (transferred by parameters):

Copy the code below and use it as follows: $ ('myselector'). maskOwnName (['of', 'on', 'a', 'as', 'at', 'for', 'in', 'to']);

 (function($) { $.fn.teste = 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 <= maxlength) e.preventDefault(); else return; for (var i = 0; i < words.length; i++){ words[i] = words[i].toLowerCase(); if(not_capitalize.indexOf(words[i]) == -1) words[i] = PHP.ucfirst(words[i]); } 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); 

Answer 15

With Javascript you can use:

 yourtext.substr(0,1).toUpperCase()+yourtext.substr(1); 

If you create your webpage accidentally with PHP , you can also use:

 <?=ucfirst($your_text)?> 

Answer 16

  .first-character{ font-weight:bold; color:#F00; text-transform:capitalize; } .capital-text{ text-transform:uppercase; } 

Answer 17

Jquery or Javascipt do not provide an inline method to achieve this.

Converting a CSS test ( text-transform:capitalize; ) does not actually capitalize the string data, but displays a title visualization on the screen.

If you are looking for a more legit way to achieve this at the data level with simple 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); } } 

Answer 18

A small update for cumul.

The upperFirstAll function does not work properly if there is more than one space between words. Replace the regex for this:

 $(this).val(txt.toLowerCase().replace(/^(.)|(\s|\-)+(.)/g,