CODEWITHSUNDEEP
javascriptjqueryhtml
user1436111
user1436111

Reputation: 2141

Capitalize first letter of words in sentence, except on manual replacement

I have an input field that the user will fill in and I want to automatically capitalize the first letter of each word as they're typing. However, if they manually delete a capital letter and replace it with a lower case, I want that to remain (basically capitalizing the letters is what we recommend, but not required). I'm having trouble implementing something that will leave the letters they manually typed alone and not change them.

Here is the code I have along with a Jsfiddle link to it. 

<input class="capitalize" />

and JS:

lastClick = 0;

$(document).ready(function() {
$(".capitalize").keyup(function() {
            var key = event.keyCode || event.charCode;
        if (!(lastClick == 8 || lastClick == 46)) {
                //checks if last click was delete or backspace
            str = $(this).val();  
                        //Replace first letter of each word with upper-case version.
            $(this).val(str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}));               
        }
        lastClick = key;
    });
});

I haven't allowed for preserving the user's manual corrections, but as it is you can see in the jsfiddle that the input jumps around and doesn't work correctly. Can anyone help me or recommend a best way to do this? Thank you.

Upvotes: 3

Views: 1023

Answers (2)

samazi
samazi

Reputation: 1171

$(document).ready(function() {

    $(".capitalize")
    .keyup(function(event) {
        var key = event.keyCode || event.charCode;
        // store the key which was just pressed
        $(this).data('last-key', key);
    })
    .keypress(function(event) {
        var key = event.keyCode || event.charCode;
        var lastKey = $(this).data('last-key') ? $(this).data('last-key') : 0;  // we store the previous action
        var $this = $(this); // local reference to the text input
        var str = $this.val(); // local copy of what our value is
        var pos = str.length;
        if(null !== String.fromCharCode(event.which).match(/[a-z]/g)) {
            if ((pos == 0 || str.substr(pos - 1) == " ") && (!(lastKey == 8 || lastKey == 46))) {
                event.preventDefault();
                $this.val($this.val() + String.fromCharCode(event.which).toUpperCase());
            }
        }
        // store the key which was just pressed
        $(this).data('last-key', key);
    });

});

I have updated your fiddle http://jsfiddle.net/nB4cj/4/ which will show this working.

Upvotes: 1

Jared Farrish
Jared Farrish

Reputation: 49188

$(document).ready(function() {
    var last;

    $(".capitalize").on('keyup', function(event) {
        var key = event.keyCode || event.which,
            pos = this.value.length,
            value = this.value;

        if (pos == 1 || last == 32 && (last !== 8 || last !== 46)) {
            this.value = value.substring(0, pos - 1) +
                         value.substring(pos - 1).toUpperCase();
        }

        last = key;
    });
});

http://jsfiddle.net/userdude/tsUnH/1

Upvotes: 1

Related Questions