'I want to move placeholder text while typing the text in Textfield

I used the following code

UITextField *email =[[UITextField alloc]initWithFrame:CGRectMake(48, 330, 330, 50)];
UITextField *password =[[UITextField alloc]initWithFrame:CGRectMake(48, 400, 330, 50)];
email.backgroundColor = [UIColor whiteColor];
email.font = [UIFont fontWithName:@"Arial-BoldMT" size:22];
email.textColor = [UIColor blackColor];
email.keyboardType = UIKeyboardTypeEmailAddress;
email.spellCheckingType = YES;
email.layer.cornerRadius =10.5;
email.clipsToBounds = YES;
email.placeholder=@"Email address";
email.textAlignment=NSTextAlignmentLeft;
email.layer.borderWidth = 1;
email.layer.borderColor = [[UIColor blackColor] CGColor];


Solution 1:[1]

I believe what OP wants is something akin to the HTML5 + bootstrap behavior of inputs in that when the user starts typing the placeholder text moves up to the top line of the input field (or above it). There is no default/build in behavior for this in iOS (that I know of).

Even though you didn't show any attempt at this (and you should as this is SO and folks want to see attempts before trying to help -- I would have liked to see at least an attempt as well), I've got some preliminary advice/help for you which should point you in the right direction of what you'd like to accomplish:

I'd recommend creating a custom view which holds your testField along with another label (the label will be used for displaying the placeholder when the user starts typing in the text field).

In the xib, set the label higher up than the text field (so it displays on top).

PlaceholderTextLabel

Set the bottom constraint of the "placeholderLabel" to the top of the "textField" offset by the height of the "placeholderLabel" Connect this constraint to an IBOutlet on your custom view which we're going to use later verticalSpacingConstraintForPlaceholderWhileEditing.

BottomConstraintOfPlaceholder

Then make your custom view (which is holding both elements) a textFieldDelegate and implement - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string to determine whether to show or hide the placeholder label based on whether the text field is going to have placeholder text or not (whether it has any contents) -- IBOutlet for textField is public (in the .h) as it may need to be accessed by other classes:

@interface R4NShiftingPlaceholderInputView() <UITextFieldDelegate>
@property (strong, nullable) IBOutlet UILabel *placeholderWhenEditing;
@property (strong, nullable) IBOutlet NSLayoutConstraint *verticalSpacingConstraintForPlaceholderWhileEditing;
@end

@implementation R4NShiftingPlaceholderInputView

- (void)awakeFromNib {
    [super awakeFromNib];
    self.placeholderWhenEditing.alpha = 0.0f;
    self.placeholderWhenEditing.text = self.textField.placeholder;
    self.textField.layer.cornerRadius = 10.5f;
}

- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
    // determine if we're going to have an empty string after
    NSString *completeString = [textField.text stringByReplacingCharactersInRange:range withString:string];
    CGFloat alphaValue = 0.0f;
    CGFloat animationSpeed = 0.07f;
    if (completeString.length > 0) {
        alphaValue = 1.0f;
        animationSpeed = 0.2f;
        // if you'd prefer to have it appear on top of the text field instead of near the top line, set the constraint to 0 instead (placeholderWhileEditing
        self.verticalSpacingConstraintForPlaceholderWhileEditing.constant = floorf(self.placeholderWhenEditing.frame.size.height / 2);
    } else {
        self.verticalSpacingConstraintForPlaceholderWhileEditing.constant = self.placeholderWhenEditing.frame.size.height;
    }
    [UIView animateWithDuration:animationSpeed animations:^{
        self.placeholderWhenEditing.alpha = alphaValue;
        [self layoutIfNeeded];
    }];
    return YES;
}

Here's an example using the above code:

Example_Gif

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 R4N