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

Question

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];

I don't understood what you want, so even if I could help, I can't since I don't understand your issue. And that might be the cases for others too. So could you clarify "move placeholder text while typing the text"? — Larme, May 10 '22 at 09:08
Yes, the Placeholder message will automatically move up when entering the text, and in the same way, the placeholder message comes back and is set when removing the entered text. — Sairam Alluri, May 10 '22 at 12:30

score 1 · Answer 1 · answered May 13 '22 at 01:45

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).

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.

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:

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

1 Answers1