Automatically Change A Value In A Form Field

I have a webpage where people enter information (name, job title, address, etc.) and it auto creates a business card for them. I currently have some jQuery that uses .change and lo

Solution 1:

Here is a working sample of what you may be looking for.

$("#textbox").on("change", function() {
    $(this).val(function(index, value) {
        return value.replace('Avenue', 'Ave.');
    });
});

http://jsfiddle.net/decx8sw9/

Solution 2:

If you really wanted it to do it after the user has finished making changes ("after the user tabs / exits the field.") you might want to bind to blur (fires when focus is lost/shifted to some other element)...

$('#cartText4046').on( "blur", function() {
$(this).val(function(index, value) {
    value = value.replace('Avenue', 'Ave.');
    // keep going ... value = value.replace('Street', 'St.') ..
    return value;
});

Solution 3:

EDIT: I reread the question, and now see that you wanted the correction to happen after the user exits the field. This answer provides inline autocorrection while the user types. I will leave it in case you find it useful after all.

You can lift the code from the jQuery Autocorrect Plugin: jsfiddle.

$("#textbox").autocorrect({
    corrections: {
        Avenue: "Ave.",
        "...": "someWord"
    }
});