Question

When a user focuses on a text field, I want that text in that text field to change colors (among several other properties). When the user leaves that field (blur), I want the text/style to appear as it was before the focus. Currently I am doing it in what seems to be a repetitious way.

$('#name1').focus(function() {
    $(this).css('color', 'red')
});
$('#name1').blur(function() {
        $(this).css('color', 'black')
});

How would I do this something like:

$('#name1').blur(function() {
        $(this).beforeFocus();
});

Answer 1

Define a css style on how it should be on focus and remove it onblur.

.input_focus {
   color: red;
}

And the script,

$('#name1').focus(function() {
    $(this).addClass('input_focus')
}).blur(function() {
    $(this).removeClass('input_focus')
});

This way you can add any number of style when focused.