make first character of each word capital in input

Question

I was wondering how can i automatically make first character of the word in an input area Currently my code is

Name:<input type='text' name='name' class='name' placeholder='Enter your name here'/>

So you want it to look different, or actually become different? CSS cannot do the latter. — Jukka K. Korpela, Oct 27 '13 at 09:42
possible duplicate of [make the first character uppercase in css](http://stackoverflow.com/questions/5577364/make-the-first-character-uppercase-in-css) — Anil Bhattarai100, Jun 01 '14 at 10:52

score 28 · Accepted Answer · edited Oct 26 '13 at 11:38

28

You can try this: DEMO

Name:<input type='text' name='name' class='name' style="text-transform: capitalize;" placeholder='Enter your name here'/>

or add text-transform: capitalize; in your name in css.

edited Oct 26 '13 at 11:38

underscore

6,495
6
39
78

answered Oct 26 '13 at 11:32

8

It works only in the sense that the initial letters are *displayed* to the user in uppercase. The actual data in the DOM (as accessible to JavaScript code) and as submitted in form data will still be as the user entered it. – Jukka K. Korpela Oct 26 '13 at 12:12
@Jukka K. Korpela -I will request you to edit my answer with appropriate `javascript` code to do the same. – Oct 27 '13 at 08:52
1

It would be inappropriate to edit someone else’s answer to something completely different. Since the OP has accepted this answer, it seems that he actually wanted the text look different from what it actually is as form data, even though that sounds odd. – Jukka K. Korpela Oct 27 '13 at 09:41
It also capitalizes the placeholder text—in case anyone was wondering. – MrColes May 10 '16 at 18:54
It still accepts capital letters in between if user entered within a word, like `dZone` – Phaneendra Charyulu Kanduri May 22 '20 at 14:11

score 7 · Answer 2 · answered Jan 18 '18 at 13:47

The problem with using CSS (text-transform: capitalize) is that when the form gets submitted, the name will be submitted with a lowercase name.

The CSS works well for cosmetics but not for functionality.

You can use jQuery to force capitalization functionality in your input boxes:

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
    $('.name').keyup(function(event) {
        var textBox = event.target;
        var start = textBox.selectionStart;
        var end = textBox.selectionEnd;
        textBox.value = textBox.value.charAt(0).toUpperCase() + textBox.value.slice(1).toLowerCase();
        textBox.setSelectionRange(start, end);
    });
});
</script>

Put this code between the <head> </head> on the page where your form is located.

Above jQuery will also force ALL CAPS to Capitalize.

Check out the Fiddle here: https://jsfiddle.net/cgaybba/6rps8hfo/

score 3 · Answer 3 · answered May 17 '17 at 17:24

3

I think it should also be mentioned that if the form is on mobile, you can just use the autocapitalize attribute. see here for documentation

answered May 17 '17 at 17:24

samnau

683
7
7

score 1 · Answer 4 · answered Oct 26 '13 at 11:42

1

Try this

HTML CODE

<input type='text' name='name' class='name' placeholder='Enter your name here'/>

CSS CODE

<style>
 .name 
{
    text-transform:capitalize;
}
 </style>

answered Oct 26 '13 at 11:42

Sonya Krishna

269
1
11

Saurabh Pathak · Answer 5 · 2023-06-27T10:13:18.910

jQuery.noConflict();
jQuery(document).ready(function($) {
  $('.contact_person_name').keyup(function(event) {
    var textBox = event.target;
    var start = textBox.selectionStart;
    var end = textBox.selectionEnd;
    
    // Capitalize the first letter of each word after a space
    textBox.value = textBox.value.toLowerCase().replace(/(?:^|\s)\w/g, function(match) {
      return match.toUpperCase();
    });
    
    textBox.setSelectionRange(start, end);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<input type="text" class="contact_person_name" id="contact_person_name" name="contact_person_name">

This code is working perfact for me because i want that it will take capital text after sapace — Saurabh Pathak, Jun 27 '23 at 07:37

score 0 · Answer 6 · answered Oct 26 '13 at 11:37

0

Update you css

.name { text-transform: capitalize; }

answered Oct 26 '13 at 11:37

Vinod

1,882
2
17
27

score 0 · Answer 7 · answered Sep 02 '21 at 23:08

The good side of using JS is that when the user submits the form, it retains the capitalized input values, but using css when the form is submitted, it looses the capitalized values (for frontend only).

Note for CSS: make sure you don't have any overriding styles else use !important.

//For CSS

input { text-transform: capitalize }

//For JS

$('.your-input').on('change keydown paste', function(e) {
    if (this.value.length = 1) {}
    var $this_val = $(this).val();
    this_val = $this_val.toLowerCase().replace(/\b[a-z]/g, function(char) {
    return char.toUpperCase();
    });
    $(this).val(this_val);
});

score -1 · Answer 8 · answered May 30 '21 at 08:54

-1

Just include → style="text-transform:capitalize;" inside your input tag.

answered May 30 '21 at 08:54

W.A.K.Jithmini

21
1

1

Same solution as other answers. – Eric Aya May 30 '21 at 10:59

make first character of each word capital in input

8 Answers8

Linked