Javascript to auto-capitalize first letter of every word in input fields

Question

I have a javascript code that auto-capitalizes first letter of every sentence as typed in any input field(s) of the page.

The code is as follows:

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
    $('input').on('keydown', function(event) {
        if (this.selectionStart == 0 && event.keyCode >= 65 && event.keyCode <= 90 && !(event.shiftKey) && !(event.ctrlKey) && !(event.metaKey) && !(event.altKey)) {
           var $t = $(this);
           event.preventDefault();
           var char = String.fromCharCode(event.keyCode);
           $t.val(char + $t.val().slice(this.selectionEnd));
           this.setSelectionRange(1,1);
        }
    });
});
});//]]> 

</script>

I need help in transforming the above code to autocapitalize first letter of every word typed in input fields instead of just the first word only.

what is the purpose of using `setSelectionRange` and `selectionStart`? — gurvinder372, Jan 06 '18 at 09:48
Possible duplicate of [Capitalize First Letter of each word in a String - JavaScript](https://stackoverflow.com/questions/32589197/capitalize-first-letter-of-each-word-in-a-string-javascript) — Durga, Jan 06 '18 at 09:52

gurvinder372 · Accepted Answer · 2018-01-06T09:55:03.260

7

You can simply apply this method at the keyup event

function toTitleCase( str ) 
{
   return str.split(/\s+/).map( s => s.charAt( 0 ).toUpperCase() + s.substring(1).toLowerCase() ).join( " " );
}

And now use it as

$('input').on('keyup', function(event) {
    var $t = $(this);
    $t.val( toTitleCase( $t.val() ) );
});

Demo

function toTitleCase(str) {
  return str.split(/\s+/).map(s => s.charAt(0).toUpperCase() + s.substring(1).toLowerCase()).join(" ");
}


$('input').on('keyup', function(event) {
  var $t = $(this);
  $t.val(toTitleCase($t.val()));
});

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

edited Jan 06 '18 at 09:55

answered Jan 06 '18 at 09:53

gurvinder372

66,980
10
72
94

OP wants `autocapitalize first letter of every word`, i.e. `titleCase` right – Durga Jan 06 '18 at 09:54
@Durga I google about *titleCase*, it is what I am referring to as capital case, I will update the answe. – gurvinder372 Jan 06 '18 at 09:56
@Durga OP is asking how to do that while user is typing in the input field.. If there is a dupe for this, I will delete my answer. – gurvinder372 Jan 06 '18 at 09:59

score 1 · Answer 2 · answered Jan 06 '18 at 09:58

1

Don't make it hard. If you can do like this.

Apply this CSS in to the field.

.capitalize {
    text-transform: capitalize;   
  }

for jquery:

$('#id').addClass('capitalize');

for javascript:

document.getElementById("id").className="capitalize";

answered Jan 06 '18 at 09:58

Chaitanya Desai

333
3
17

Depends if you want to use the inputted value transformed or not, as this will simply transform the display to the user rather than the underlying data – Craig Myles Aug 23 '18 at 02:59

Javascript to auto-capitalize first letter of every word in input fields

2 Answers2