Moving UITextField When Keyboard Pops Up!

[Shmoopi]

Welcome everybody! This tutorial is going to show you how to move a textfield whenever the keyboard pops up! One of the biggest problems with textfields is that when the keyboard pops up, the content gets stuck under the keyboard resulting in the total or partial obstruction of the very textfield that your users are trying to write in!! There are several fixes for this problem, but I will only be showing you my version. So feel free to explain any methods that I didn't in the comments, or email me so I can include it in the tutorial!

The easiest method of un-obstructing the textfield is simply by moving it. Here is what you do: First you need to make sure that the delegate is selected for the textfield in your interface builder file (xib containing textfield). So under the connections tab in your inspector window, make sure that your text field has the delegate set to self. You can also set it in the code under viewdidload as:

 /* UITextField Name */ .delegate = self;

But you have to make sure you set it in the .h file in between the brackets like this, or else you get an error:

 ViewController : UIViewController /* apparently this is also html code because it won't show up but it is the "UIText Field Delegate" without the "'s or the spaces. */ {

The next step is to add these methods into your code:

- (void)textFieldDidBeginEditing:(UITextField *)textField {	

}
- (void)textFieldDidEndEditing:(UITextField *)textField {

}

These methods will go off whenever your textfield has been touched, and when it is done. So now to move it when touched: Go ahead and add this code in the textFieldDidBeginEditing method above:

- (void)textFieldDidBeginEditing:(UITextField *)textField {	
[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDelegate:self];
	[UIView setAnimationDuration:0.5];
	[UIView setAnimationBeginsFromCurrentState:YES];
	textfield.frame = CGRectMake(textfield.frame.origin.x, (textfield.frame.origin.y - 100.0), textfield.frame.size.width, textfield.frame.size.height);
	[UIView commitAnimations];
}

Most of the code here is unnecessary because we are simply moving the textfield's y origin down 100 points, going up. The UIView animations are simply for visual effect, I personally dislike seeing a textfield appear out of thin air. You can also change the y origin's movement from 100 to any size amount that you need. So go ahead and try it out to see what happens. You should see a nice textfield moving up every time you click on it to change the text, bravo. Now let's move it back down when you're done with it.
Add this to your textFieldDidEndEditing method:

- (void)textFieldDidEndEditing:(UITextField *)textField {	
[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDelegate:self];
	[UIView setAnimationDuration:0.5];
	[UIView setAnimationBeginsFromCurrentState:YES];
	textfield.frame = CGRectMake(textfield.frame.origin.x, (textfield.frame.origin.y + 100.0), textfield.frame.size.width, textfield.frame.size.height);
	[UIView commitAnimations];
}

Easy peasy, looks perfect now doesn't it? Now what if we had more than 1 textfield what would we do? Try this:

- (void)textFieldDidBeginEditing:(UITextField *)textField {	
		if (textField == textField1) {
			[UIView beginAnimations:nil context:NULL];
			[UIView setAnimationDelegate:self];
			[UIView setAnimationDuration:0.5];
			[UIView setAnimationBeginsFromCurrentState:YES];
			textfield1.frame = CGRectMake(textfield1.frame.origin.x, (textfield1.frame.origin.y - 100.0), textfield1.frame.size.width, textfield1.frame.size.height);
			[UIView commitAnimations];
		} else if (textField == textField2) {
			[UIView beginAnimations:nil context:NULL];
			[UIView setAnimationDelegate:self];
			[UIView setAnimationDuration:0.5];
			[UIView setAnimationBeginsFromCurrentState:YES];
			textfield2.frame = CGRectMake(textfield2.frame.origin.x, (textfield2.frame.origin.y - 100.0), textfield2.frame.size.width, textfield2.frame.size.height);
			[UIView commitAnimations];
		}
	}
	- (void)textFieldDidEndEditing:(UITextField *)textField {	
		if (textField == textField1) {
			[UIView beginAnimations:nil context:NULL];
			[UIView setAnimationDelegate:self];
			[UIView setAnimationDuration:0.5];
			[UIView setAnimationBeginsFromCurrentState:YES];
			textfield1.frame = CGRectMake(textfield1.frame.origin.x, (textfield1.frame.origin.y + 100.0), textfield1.frame.size.width, textfield1.frame.size.height);
			[UIView commitAnimations];
		} else if (textField == textField2) {
			[UIView beginAnimations:nil context:NULL];
			[UIView setAnimationDelegate:self];
			[UIView setAnimationDuration:0.5];
			[UIView setAnimationBeginsFromCurrentState:YES];
			textfield2.frame = CGRectMake(textfield2.frame.origin.x, (textfield2.frame.origin.y + 100.0), textfield2.frame.size.width, textfield2.frame.size.height);
			[UIView commitAnimations];
		}

Excellent, now let's do just one more thing: Let's have it so that the textfield will return whenever you click somewhere else on the screen. I personally dislike having to put text in a textfield every time before the Done button will show up. So here's what you do: Simply add this code:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
	[textfield resignFirstResponder];
}

And.. Wallah that's it! Now you have a very professional text field that not only moves up and down to avoid being trapped behind the keyboard, it also returns whenever you click out of it. No more having to put unnecessary text in to see the done button!!! Huzzah! Well, that's all I got for you. Feel free to explain different methods of doing it below, and if you have any questions or concerns at all, feel free to email me at support@shmoopigaming.com

Get the project for this sample code here!

[dbarrett]

Great post! Thanks!!! Quick question though, say I have 5 different text fields in my view, could this chunk of code handle that? By a quick glance of your code, it looks like I would have to enter all this for each individual text field; am I right? If that's the case, would ALL the text fields move up at the same time or just the one being typed in?

Thanks.

[Shmoopi]

Originally Posted by dbarrett

Great post! Thanks!!! Quick question though, say I have 5 different text fields in my view, could this chunk of code handle that? By a quick glance of your code, it looks like I would have to enter all this for each individual text field; am I right? If that's the case, would ALL the text fields move up at the same time or just the one being typed in?

Thanks.

Great question. With the way I have it set up now, if you tried to include any other textfields in the code provided, it will move all of them up every time you click on one of the textfields. You can do something like this to prevent that and make it so that only the one you click will come up:

- (void)textFieldDidBeginEditing:(UITextField *)textField {	
if (textField == txt) {
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDelegate:self];
	[UIView setAnimationDuration:0.5];
	[UIView setAnimationBeginsFromCurrentState:YES];
	textfield.frame = CGRectMake(textfield.frame.origin.x, (textfield.frame.origin.y - 100.0), textfield.frame.size.width, textfield.frame.size.height);
	[UIView commitAnimations];
}
}
- (void)textFieldDidEndEditing:(UITextField *)textField {	
if (textField == txt) {
		[UIView beginAnimations:nil context:NULL];
		[UIView setAnimationDelegate:self];
		[UIView setAnimationDuration:0.5];
		[UIView setAnimationBeginsFromCurrentState:YES];
		textfield.frame = CGRectMake(textfield.frame.origin.x, (textfield.frame.origin.y + 100.0), textfield.frame.size.width, textfield.frame.size.height);
		[UIView commitAnimations];
	}

[dbarrett]

Originally Posted by Shmoopi

Great question. With the way I have it set up now, if you tried to include any other textfields in the code provided, it will move all of them up every time you click on one of the textfields. You can do something like this to prevent that and make it so that only the one you click will come up:

- (void)textFieldDidBeginEditing:(UITextField *)textField {	
if (textField == txt) {
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDelegate:self];
	[UIView setAnimationDuration:0.5];
	[UIView setAnimationBeginsFromCurrentState:YES];
	textfield.frame = CGRectMake(textfield.frame.origin.x, (textfield.frame.origin.y - 100.0), textfield.frame.size.width, textfield.frame.size.height);
	[UIView commitAnimations];
}
}
- (void)textFieldDidEndEditing:(UITextField *)textField {	
if (textField == txt) {
		[UIView beginAnimations:nil context:NULL];
		[UIView setAnimationDelegate:self];
		[UIView setAnimationDuration:0.5];
		[UIView setAnimationBeginsFromCurrentState:YES];
		textfield.frame = CGRectMake(textfield.frame.origin.x, (textfield.frame.origin.y + 100.0), textfield.frame.size.width, textfield.frame.size.height);
		[UIView commitAnimations];
	}

Thanks dude.

[Steaps]

Looks very, very familiar...
http://www.iphonedevsdk.com/forum/ip...into-view.html

[Shmoopi]

Originally Posted by Steaps

Looks very, very familiar...
http://www.iphonedevsdk.com/forum/ip...into-view.html

Thanks for pointing that out, but no I did not take that from you Steaps. I do remember to site my sources.

[Ragnarog]

Bit of a consolidation possible here with:

- (void)textFieldDidBeginEditing:(UITextField *)textField {	
            
                [UIView beginAnimations:nil context:NULL]; //moved outside the if statement
                [UIView setAnimationDelegate:self];
                [UIView setAnimationDuration:0.5];
                [UIView setAnimationBeginsFromCurrentState:YES];
		if (textField == textField1) {
			textfield1.frame = CGRectMake(textfield1.frame.origin.x, (textfield1.frame.origin.y - 100.0), textfield1.frame.size.width, textfield1.frame.size.height);
			[UIView commitAnimations];
		} else if (textField == textField2) {
			textfield2.frame = CGRectMake(textfield2.frame.origin.x, (textfield2.frame.origin.y - 100.0), textfield2.frame.size.width, textfield2.frame.size.height);
			[UIView commitAnimations];
		}
	}
	- (void)textFieldDidEndEditing:(UITextField *)textField {	
                 [UIView beginAnimations:nil context:NULL];
                 [UIView setAnimationDelegate:self];
                 [UIView setAnimationDuration:0.5];
                 [UIView setAnimationBeginsFromCurrentState:YES];
                 if (textField == textField1) {
			textfield1.frame = CGRectMake(textfield1.frame.origin.x, (textfield1.frame.origin.y + 100.0), textfield1.frame.size.width, textfield1.frame.size.height);
			[UIView commitAnimations];
		} else if (textField == textField2) {
			textfield2.frame = CGRectMake(textfield2.frame.origin.x, (textfield2.frame.origin.y + 100.0), textfield2.frame.size.width, textfield2.frame.size.height);
			[UIView commitAnimations];
		}

Wondering however if there's a way to cache the original textField.frame values somewhere so you could simply do:

- (void)textFieldDidEndEditing:(UITextField *)textField {	
                 [UIView beginAnimations:nil context:NULL];
                 [UIView setAnimationDelegate:self];
                 [UIView setAnimationDuration:0.5];
                 [UIView setAnimationBeginsFromCurrentState:YES];
                 if (textField == textField1) {
			textfield1.frame = cachedtextfield1.frame;
			[UIView commitAnimations];
                 }

Any way to do this ?

Rag

[Jules2010]

Perhaps I'm missing the point here, I've tried the code from the opening post in this thread.

On my view I have a label at the top, an OK button at the bottom and a textfield with a label for it, just above that.

When i try the code it does move the textfield up, but it leaves the label behind. If I'd had more controls above the textfield, the texfield would now be on top of them !?!

Surely a better approach is to move the view up ?

I found this page, however it doesn't move the view back down.

How to make a UITextField move up when keyboard is present - Stack Overflow

[Dyvern]

well thats all fine and dandy but i need to know where to put everything.
so could you help me with that?

[Jules2010]

Originally Posted by Dyvern

well thats all fine and dandy but i need to know where to put everything.
so could you help me with that?

Have a look at my blog post.

How to add your own Done button to the iPhone numeric keypad | Software Promotion + SEO

[Dyvern]

well, ok, but could you tell me where and how to put in the code to allow the scrolling of the view behind the keyboard..?

[jalazmi]

thanks Shmoopi, it was great tutorial

I have one question and I hope you have the answer,

what I want to do is something like the TextField that appears in Messages application.. I need to move the textfield with "send button" and to have multi lines in the textfield

I try your ways with UIButton but it dose't have delegate so how I can do it..!?

[Hanoah]

You can check out my quick and easy 3 part tutorial on the keyboard. Shows how to scroll the view for multiple textFields and also add a toolbar to the keyboard to tab through textFields.

Keyboard Tutorial

[Duncan C]

Originally Posted by Shmoopi

Welcome everybody! This tutorial is going to show you how to move a textfield whenever the keyboard pops up! One of the biggest problems with textfields is that when the keyboard pops up, the content gets stuck under the keyboard resulting in the total or partial obstruction of the very textfield that your users are trying to write in!! There are several fixes for this problem, but I will only be showing you my version. So feel free to explain any methods that I didn't in the comments, or email me so I can include it in the tutorial!

I have a number of problems with the method you used:

1. You only move the text field? That would look really odd. The text field would move up, but the rest of the form stays in place. The text field would float up out of it's normal place.

2. You move the text field by a fixed amount. Different countries use different keyboard layouts, and the user may even load a different keyboard on his/her device without changing locales. You should ask the keyboard for it's height, and use that.

3. There are notifications you can register for that the system puts up when the keyboard is about to appear.


Here's how I deal with those issues:

1. Instead of moving the text field, I move the view controller's whole content view. This causes the entire user interface to slide up. It looks much more natural. Further, since I find out from the system how long the keyboard slide animation is going to take, I can use the same timing, so everything moves together (see the code below.)

2. If you use the keyboard notifications (see #3, below) you can get info about the keyboard size and shift up by the correct amount regardless of the size of the keyboard.

Explaining #3 requires posting some code, so here goes.

First, put the following into your viewWillAppear: method:

[[NSNotificationCenter defaultCenter] addObserver: self
  selector: @selector(shiftViewUpForKeyboard:)
  name: UIKeyboardWillShowNotification
  object: nil];
[[NSNotificationCenter defaultCenter] addObserver: self
  selector: @selector(shiftViewDownAfterKeyboard)
  name: UIKeyboardWillHideNotification
  object: nil];

That tells the system to call your shiftViewUpForKeyboard: method before displaying the keyboard, and to call your shiftViewDownAfterKeyboard before hiding the keyboard.

Next put this code into your viewWillDisappear: method:

[[NSNotificationCenter defaultCenter] removeObserver: self
  name: UIKeyboardWillShowNotification
  object: nil];
[[NSNotificationCenter defaultCenter] removeObserver: self
  name: UIKeyboardWillHideNotification
  object: nil];

Then, add these methods to your view controller:

- (void) shiftViewUpForKeyboard: (NSNotification*) theNotification;
{
  CGRect keyboardFrame;
  NSDictionary* userInfo = theNotification.userInfo;
  keyboardSlideDuration = [[userInfo objectForKey: UIKeyboardAnimationDurationUserInfoKey] floatValue];
  keyboardFrame = [[userInfo objectForKey: UIKeyboardFrameBeginUserInfoKey] CGRectValue];
  
  UIInterfaceOrientation theStatusBarOrientation = [[UIApplication sharedApplication] statusBarOrientation];
  
  if UIInterfaceOrientationIsLandscape(theStatusBarOrientation)
    keyboardShiftAmount = keyboardFrame.size.width;
  else 
    keyboardShiftAmount = keyboardFrame.size.height;

  [UIView beginAnimations: @"ShiftUp" context: nil];
  [UIView setAnimationDuration: keyboardSlideDuration];
  self.view.center = CGPointMake( self.view.center.x, self.view.center.y - keyboardShiftAmount);
  [UIView commitAnimations];
  viewShiftedForKeyboard = TRUE;
}

//------------------

- (void) shiftViewDownAfterKeyboard;
{
  if (viewShiftedForKeyboard)
  {
    [UIView beginAnimations: @"ShiftUp" context: nil];
    [UIView setAnimationDuration: keyboardSlideDuration];
    self.view.center = CGPointMake( self.view.center.x, self.view.center.y + keyboardShiftAmount);
    [UIView commitAnimations];
    viewShiftedForKeyboard = FALSE;
  }
}

The code above requires that you add a few instance variables to your view controller:

BOOL viewShiftedForKeyboard;
NSTimeInterval keyboardSlideDuration;
CGFloat keyboardShiftAmount;

I think that's it, although I might have missed one.

Note that the code above moves the UI up by the full size of the keyboard. (It deals with both portrait and landscape orientations.)

Sometimes, though, you may want to shift the view controller's views up just enough to expose the field that's being edited. In that case, you want to keep track of the field the user is editing, and calculate how much you need to shift the view controller so that the bottom of the text field is visible (using the text field's frame property.) I've written code to work that way before, but don't have it handy. I was able to extract the code above pretty much as-is from one of our company's apps.

[vikinara]

Originally Posted by Duncan C

I have a number of problems with the method you used:

1. You only move the text field? That would look really odd. The text field would move up, but the rest of the form stays in place. The text field would float up out of it's normal place.

2. You move the text field by a fixed amount. Different countries use different keyboard layouts, and the user may even load a different keyboard on his/her device without changing locales. You should ask the keyboard for it's height, and use that.

3. There are notifications you can register for that the system puts up when the keyboard is about to appear.


Here's how I deal with those issues:

1. Instead of moving the text field, I move the view controller's whole content view. This causes the entire user interface to slide up. It looks much more natural. Further, since I find out from the system how long the keyboard slide animation is going to take, I can use the same timing, so everything moves together (see the code below.)

2. If you use the keyboard notifications (see #3, below) you can get info about the keyboard size and shift up by the correct amount regardless of the size of the keyboard.

Explaining #3 requires posting some code, so here goes.

First, put the following into your viewWillAppear: method:

[[NSNotificationCenter defaultCenter] addObserver: self
  selector: @selector(shiftViewUpForKeyboard:)
  name: UIKeyboardWillShowNotification
  object: nil];
[[NSNotificationCenter defaultCenter] addObserver: self
  selector: @selector(shiftViewDownAfterKeyboard)
  name: UIKeyboardWillHideNotification
  object: nil];

That tells the system to call your shiftViewUpForKeyboard: method before displaying the keyboard, and to call your shiftViewDownAfterKeyboard before hiding the keyboard.

Next put this code into your viewWillDisappear: method:

[[NSNotificationCenter defaultCenter] removeObserver: self
  name: UIKeyboardWillShowNotification
  object: nil];
[[NSNotificationCenter defaultCenter] removeObserver: self
  name: UIKeyboardWillHideNotification
  object: nil];

Then, add these methods to your view controller:

- (void) shiftViewUpForKeyboard: (NSNotification*) theNotification;
{
  CGRect keyboardFrame;
  NSDictionary* userInfo = theNotification.userInfo;
  keyboardSlideDuration = [[userInfo objectForKey: UIKeyboardAnimationDurationUserInfoKey] floatValue];
  keyboardFrame = [[userInfo objectForKey: UIKeyboardFrameBeginUserInfoKey] CGRectValue];
  
  UIInterfaceOrientation theStatusBarOrientation = [[UIApplication sharedApplication] statusBarOrientation];
  
  if UIInterfaceOrientationIsLandscape(theStatusBarOrientation)
    keyboardShiftAmount = keyboardFrame.size.width;
  else 
    keyboardShiftAmount = keyboardFrame.size.height;

  [UIView beginAnimations: @"ShiftUp" context: nil];
  [UIView setAnimationDuration: keyboardSlideDuration];
  self.view.center = CGPointMake( self.view.center.x, self.view.center.y - keyboardShiftAmount);
  [UIView commitAnimations];
  viewShiftedForKeyboard = TRUE;
}

//------------------

- (void) shiftViewDownAfterKeyboard;
{
  if (viewShiftedForKeyboard)
  {
    [UIView beginAnimations: @"ShiftUp" context: nil];
    [UIView setAnimationDuration: keyboardSlideDuration];
    self.view.center = CGPointMake( self.view.center.x, self.view.center.y + keyboardShiftAmount);
    [UIView commitAnimations];
    viewShiftedForKeyboard = FALSE;
  }
}

The code above requires that you add a few instance variables to your view controller:

BOOL viewShiftedForKeyboard;
NSTimeInterval keyboardSlideDuration;
CGFloat keyboardShiftAmount;

I think that's it, although I might have missed one.

Note that the code above moves the UI up by the full size of the keyboard. (It deals with both portrait and landscape orientations.)

Sometimes, though, you may want to shift the view controller's views up just enough to expose the field that's being edited. In that case, you want to keep track of the field the user is editing, and calculate how much you need to shift the view controller so that the bottom of the text field is visible (using the text field's frame property.) I've written code to work that way before, but don't have it handy. I was able to extract the code above pretty much as-is from one of our company's apps.

Thank u for the code. I tried the code you mentioned. I have a custom UITableviewcell with multiple UITextfields in it. When I click on the textfield, the textfield goes way up on the first three cells. What could the problem be.

[Duncan C]

Originally Posted by vikinara

Thank u for the code. I tried the code you mentioned. I have a custom UITableviewcell with multiple UITextfields in it. When I click on the textfield, the textfield goes way up on the first three cells. What could the problem be.

To quote my previous post:

Note that the code above moves the UI up by the full size of the keyboard. (It deals with both portrait and landscape orientations.)

If you want to scroll up just enough to expose the text field, you'll have to write logic that checks the y coordinate of the text view and calculates how much it needs to move the view up to make room for the keyboard.

Hint: The amount to move things up is the height of the keyboard minus the y coordinate of the text field's frame. If that value is positive, move the whole view up by that amount. If the result of the calculation is negative, you don't need to shift your view up.

[vksmaini]

Originally Posted by Duncan C

To quote my previous post:




If you want to scroll up just enough to expose the text field, you'll have to write logic that checks the y coordinate of the text view and calculates how much it needs to move the view up to make room for the keyboard.

Hint: The amount to move things up is the height of the keyboard minus the y coordinate of the text field's frame. If that value is positive, move the whole view up by that amount. If the result of the calculation is negative, you don't need to shift your view up.

Can you please code the logic you have explained above...I m a bit confused...Code any example with multiple textfields in a view...

[Vineesh]

Originally Posted by dbarrett

Great post! Thanks!!! Quick question though, say I have 5 different text fields in my view, could this chunk of code handle that? By a quick glance of your code, it looks like I would have to enter all this for each individual text field; am I right? If that's the case, would ALL the text fields move up at the same time or just the one being typed in?

Thanks.

You can give like this,

txtField1.frame = CGRectMake(txtField1.frame.origin.x, (txtField1.frame.origin.y + 100.0),txtField1.frame.size.width,txtField1.frame. size.height);
txtField2.frame = CGRectMake(txtField2.frame.origin.x, (txtField2.frame.origin.y + 100.0), txtField2.frame.size.width,txtField2.frame.size.he ight);
txtField3.frame = CGRectMake(txtField3.frame.origin.x, (txtField3.frame.origin.y + 100.0), txtField3.frame.size.width,txtField3.frame.size.he ight);

[Jakexx360]

My question for you, good sir, is how you can add landscape support to this. When I rotate it, the text field goes off to wherever, and disappears from the screen. I have it set so that the text field goes up 220, and widens 100.

Thanks,
Jake

EDIT: Nevermind. I just had to add autoresizing for width and top margin.

[wurzelsepp]

Originally Posted by vikinara

Thank u for the code. I tried the code you mentioned. I have a custom UITableviewcell with multiple UITextfields in it. When I click on the textfield, the textfield goes way up on the first three cells. What could the problem be.

Hi Duncan,
thx for the code, works perfect for moving up the view,
BUT: no reaction, when the "Return" Key on the keyboard is pressed!

Could you please give me a hint, what there could be wrong???

regards wolfgang