CODEWITHSUNDEEP
jquery
onlineracoon
onlineracoon

Reputation: 2970

jQuery capitalization text input

I need to create a capatalization jQuery plugin with the following features:

What I tried so far:

field.on('keyup change', function(e){
  var val = field.val();

  field.val(val.replace(/^(.)|\s(.)/g, function($1){ return $1.toUpperCase( ); }));
});

The problem is, regex parses the whole value, but only the new characters typed should be parsed.

Thanks for reading

Upvotes: 0

Views: 3915

Answers (4)

Yuseferi
Yuseferi

Reputation: 8720

auto capitalize first world of each world

//usage
$("input").keyup(function() {
toUpper(this);
});


//function
function toUpper(obj) {
var mystring = obj.value;
var sp = mystring.split(' ');
var wl=0;
var f ,r;
var word = new Array();
for (i = 0 ; i < sp.length ; i ++ ) {
f = sp[i].substring(0,1).toUpperCase();
r = sp[i].substring(1).toLowerCase();
word[i] = f+r;
}
newstring = word.join(' ');
obj.value = newstring;
return true;
}

Upvotes: 0

Otineb
Otineb

Reputation: 31

This works great in Chrome, but unfortunately this doesn't seem to work reliably in Firefox. I was able to work up this solution that uses blur instead. Seems to work well across all browsers.

HTML

<label>Address 1</label>
<input name="addressaddress1" id="addressaddress1" value=""
size="25" />

<label>Address 2</label>
<input name="addressaddress1" id="addressaddress1" value=""
size="25" />

Javascript

$.fn.capitalize = function (e) {
    $.each(this, function () {
        if( $('body').data(this.id) != this.value )
        {
            var split = this.value.split(' ');
            for (var i = 0, len = split.length; i < len; i++) {
                split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1);
            }
            this.value = split.join(' ');
        }
    });

    return this;
};

$('[id^=address]').on('blur', function (e) {
    $(this).capitalize();
});

http://jsfiddle.net/bsegovia/V4ATc/31/

UPDATE!! This previous solution did not solve for ALL CAPS INPUT. refer to this jsfiddle for the corrected script. http://jsfiddle.net/bsegovia/V4ATc/

Upvotes: 0

onlineracoon
onlineracoon

Reputation: 2970

I fixed it myself after some strugling but this is my solution:

var doCap = false;

$('input').keydown(function(e) {
    var input = $(this);
    var val = input.val();

    if(doCap){
        var lastVal = val.substr(val.length - 1);

        if(lastVal !== " "){
            input.val(val.substring(0, val.length - 1) + lastVal.toUpperCase());
            doCap = false;
        }
    }
});

$('input').keypress(function(e){
    var input = $(this);
    var key = e.keyCode;
    var val = input.val();

    // Capitalize first character ever typed.
    if(val.length === 1){
        input.val(val.substr(0, 1).toUpperCase() + val.slice(1));
    }

    if(key === 32){

        // Prevent double spaces.
        if(val.substr(val.length - 1, 1) === " "){
            return false;
        }

        doCap = true;
    }
});​

http://jsfiddle.net/u4pxA/4/

Thanks for all the feedback, help.

Upvotes: 0

T I
T I

Reputation: 9953

something like this, i think it works though i don't seem to get a keycode when i hit backspace on my laptop :S

the idea being that you create an array from the text, manipulate the last word lword (last element of array) then place the array as string back into the input box / text area

$('input')​.keypress(function(e) {
    var $t = $(this);
        key = e.keyCode,
        txt = $t.val().split(' '),
        lword = txt[(txt.length - 1)];

    function replace() {
        txt[(txt.length - 1)] = lword;
        $t.val(txt.join(' '));
    }

    function undo() {
        lword = lword.toLowerCase();
        replace();
    }

    function capitalize(n) {
        lword = lword.charAt(n).toUpperCase() + lword.slice(n+1);
        replace();
    }

    if (key === 8) {
        undo();
    } else if (key === 32) {
        capitalize(0);
    }

});​​​

demo

Upvotes: 1

Related Questions