CODEWITHSUNDEEP
htmlcss
user2784859
user2784859

Reputation:

make first character of each word capital in input

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'/>

Upvotes: 11

Views: 64833

Answers (8)

Saurabh Pathak
Saurabh Pathak

Reputation: 11

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">

Upvotes: 1

Onyedikachi Oko - Dexter
Onyedikachi Oko - Dexter

Reputation: 460

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);
});

Upvotes: 0

W.A.K.Jithmini
W.A.K.Jithmini

Reputation: 21

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

Upvotes: -1

cgaybba
cgaybba

Reputation: 95

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/

Upvotes: 7

samnau
samnau

Reputation: 752

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

Upvotes: 6

Sonya Krishna
Sonya Krishna

Reputation: 269

Try this

HTML CODE

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

CSS CODE

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

Upvotes: 1

user2533777
user2533777

Reputation:

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.

Upvotes: 28

Vinod
Vinod

Reputation: 1952

Update you css

.name { text-transform: capitalize; }

Upvotes: 0

Related Questions