Change UITextField background when editing begins

Question

I'd like to change the background image of a UITextField when it becomes the firstResponder to show the user that it has focus, similar to the :active or :focus pseudo-classes in CSS.

I'm guessing that I may need to do this programmatically; so any help is greatly appreciated.

-Giles

Answer 1

You might as well use the UITextFieldDelegate methods (IMHO, easier to maintain than key-value observers):

#pragma mark -
#pragma mark UITextFieldDelegate methods

- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField
{
    _field.background = [UIImage imageNamed:@"focus.png"];
    return YES;
}

- (BOOL)textFieldShouldEndEditing:(UITextField *)textField
{
    _field.background = [UIImage imageNamed:@"nofocus.png"];
    return YES;
}

- (BOOL)textFieldShouldReturn:(UITextField *)textField
{
    [textField resignFirstResponder];
    return YES;
}

This only works when the UITextField.borderStyle property is of any type but UITextBorderStyleRoundedRect (in that case, the background property is not taken into account). This means you might use the code above with UITextBorderStyleBezel, UITextBorderStyleLine and UITextBorderStyleNone, as explained in the borderStyle documentation:

borderStyle

The border style used by the text field.

@property(nonatomic) UITextBorderStyle borderStyle

Discussion

The default value for this property is UITextBorderStyleNone. If a custom background image is set, this property is ignored.

This is the documentation for the background property of UITextField:

background

The image that represents the background appearance of the text field when it is enabled.

@property(nonatomic, retain) UIImage *background

Discussion

When set, the image referred to by this property replaces the standard appearance controlled by the borderStyle property. Background images are drawn in the border rectangle portion of the image. Images you use for the text field’s background should be able to stretch to fit.