Use first character of user input in real time using jQuery

Question

I am trying to automatically smooth out the first character of a text field / input that the user enters. The first attempt looked like this:

$(document).ready(function() { $('input').on('keydown', function() { if (this.value[0] != this.value[0].toUpperCase()) { // store current positions in variables var start = this.selectionStart; var end = this.selectionEnd; this.value = this.value[0].toUpperCase() + this.value.substring(1); // restore from variables... this.setSelectionRange(start, end); } }); }); 

The problem is that it shows a lowercase character and then corrects it, which is ugly ( http://jsfiddle.net/9zPTA/2/ ). I would like to run my javascript on keydown instead of keyup and convert the event in flight (or intercept it, prevent by default and fire a modified new event).

Here is what I have now that does not work ( http://jsfiddle.net/9zPTA/5/ ):

 $(document).ready(function() { $('input').on('keydown', function(event) { if (this.selectionStart == 0 && event.keyCode >= 65 && event.keyCode <= 90 && !(event.shiftKey)) { event.preventDefault(); var myEvent = jQuery.Event('keypress'); myEvent.target = event.target; myEvent.shiftKey = true; myEvent.keyCode = event.keyCode; $(document).trigger(myEvent); } }); }); 

I'm not sure why this is not working - what am I missing here?

Answer 1

Here is the fiddle I made that does what you want in Chrome. I'm not sure if it will work in other browsers.

the code:

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

Answer 2

In this case, it would be much easier to use CSS:

 input{ text-transform: capitalize; } 

Update : this works when you do not want to use the first letter for each word, but only the first letter of the first word:

 input::first-letter{ text-transform: uppercase; } 

Answer 3

Try the following:

 $(document).ready(function() { $('input').on('keydown', function(e) { if (this.value == '') { var char = String.fromCharCode(e.which); if (char.match(/^\w$/)) { // If is empty and we pressed a printable key... this.value = char.toUpperCase(); return false; } } }); }); 

See here here .

Answer 4

This works for me.

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

Answer 5

You can use jQuery function:

 $.fn.CapitalizeFirst = function () { return this.each(function () { $(this).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); } }); }); }; 

Answer 6

This was discussed in a previous thread. How to make the first letter of a string in uppercase in JavaScript?

You could just grab the user input after entering the first word, or indeed when you want, and reset the value using the methods described in the link above.

Answer 7

 $('selector').blur(function(){ $(this).val($(this).val().charAt(0).toUpperCase()+$(this).val().slice(1)); });