iOS项目开发键盘弹出遮挡输入框问题解决方案

在iOS或Android等移动端开发过程中,经常遇到很多需要我们输入信息的情况,例如登录时要输入账号密码、查询时要输入查询信息、注册或申请时需要填写一些信息等都是通过我们键盘来进行输入的,在iOS开发过程中,一般用于进行输入信息的有两类:UITextField和UITextView,前者是单行输入文本框,后者是可滑动的多行输入文本框,在这整个开发过程中,我们需要控制键盘的弹出和收起、在输入结束的时候获取输入的信息,此外,我们还需要保证在键盘弹起的时候不遮挡我们输入的文本框。今天,我们就主要来说一下文本框输入的完整响应过程以及最后这个遮挡问题的解决方案。

一 文本框输入完整的响应过程

首先,我们要对UITextField和UITextView的输入输出进行控制,需要借助其对应的代理协议UITextFieldDelegate或UITextViewDelegate中的一些方法,两者在控制文本框中的相应流程稍有差别,但是都差不多,接下来,我们就从官方文档中开学习一下文本框输入完整的响应过程。在UITextFieldDelegate的官方文档中解释道:我们可以通过代理中的一些方法实现UITextField对键盘的调用,从而实现和用户进行交互的方法,此外,还可控制UITextField的输入过程。UITextField的整个输入过程分为如下7个步骤(如下过程,textfield换成textView即是TextView的响应过程):

在成为第一响应者之前,文本框调用其代理的 textFieldShouldBeginEditing: 方法来允许或阻止其第一响应者,并控制是否对文本框进行输入

成为第一响应者,对应的相应事件就是系统调用键盘(自动弹出),并且系统会根据需要发出UIKeyboardWillShowNotification 和UIKeyboardDidShowNotification的Notification通知,而如果此时系统中有其他的输入视图是可视的,则系统会发出 UIKeyboardWillChangeFrameNotification和UIKeyboardDidChangeFrameNotification的通知

系统调用代理的 textFieldDidBeginEditing: 方法,并且发出UITextFieldTextDidBeginEditingNotification的通知,此时光标已经在text field中定位了,键盘也已经弹出来了,接下来可以进行输入了

在输入信息过程中,当前文本内容改变就会调用 textField:shouldChangeCharactersInRange:replacementString: 方法,并且会发出UITextFieldTextDidChangeNotification的通知。此外,当用户点击【clear/清除】按键时调用 textFieldShouldClear: 方法清除内容,当用户点击【return/完成】按键时调用 textFieldShouldReturn: 方法,注意:UITextViewDelegate没有对应清除和完成方法,所以我们不能调用 textFieldShouldClear: 方法和 textFieldShouldReturn: 方法实现【clear/清除】和【return/完成】按键的效果

在文本框输入即将结束,即即将注销第一响应者时,系统会调用 textFieldShouldEndEditing: 方法

文本框注销第一响应者,对应的响应时间就是系统收回键盘,并且在隐藏键盘时会发出 UIKeyboardWillHideNotification和UIKeyboardDidHideNotification的通知

最后,系统调用 textFieldDidEndEditing: 方法结束输入,并发出UITextFieldTextDidEndEditingNotification的通知。

二 键盘的弹出与收起

2.1 弹出键盘的控制  

关于键盘的弹出与收起问题,从上面的响应过程分析可知,键盘的弹出对于UITextField和UITextView都是自动弹出的,所以我们无需进行控制。如果需要进行控制,我们知道其实在弹出之前是调用了UITextFieldDelegate或UITextViewDelegate的以下方法来控制是否使当前文本框设置为第一响应者( becoming the first responder),文本框成为第一响应者的结果就是可以输入文本内容并弹出键盘,所以,我们可以在这个方法中通过返回值来判断是否弹出键盘。

//UITextField调用此方法
- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField{
 //返回YES是弹出键盘 返回NO则不弹出键盘
}
//UITextView调用此方法
- (BOOL)textViewShouldBeginEditing:(UITextView *)textView{
 //返回YES是弹出键盘 返回NO则不弹出键盘
}

2.1 收起键盘的控制

通过前面的分析我们知道,收起键盘主要是要注销文本框的第一响应者身份即可,所以,我们再需要控制键盘收起的时候调用 textFieldShouldEndEditing: 方法即可达到目的。关于收起键盘,我们通常有两种做法如下:

一是通过我们的键盘上的【return/完成】按键的点击事件来设置

二是设置点击空白处就收起键盘,这种方法现在比较普遍

这两种做法在UITextField和UITextView上的实现在我之前的随笔中有专门讲到过了,想了解的小伙伴可以直接戳这里:ios学习——键盘的收起

三 文本框内容的获取

在之前的分析中,我们知道,文本框在结束之后都会调用一个方法就是 textFieldDidEndEditing: / textViewDidEndEditing: 方法,这个方法就是方便我们在输入结束之后对文本框内容进行处理。如果我们开发过程中一个页面有多个相同类型的输入文本框,我们可以通过设置不同的tag来区分当前的是哪一个输入文本框,从而进行不同的处理,具体示例如下:

- (void)textViewDidEndEditing:(YYTextView *)textView{
 if (textView.tag == 400) {
  NSString *reason = textView.text;
  [self.submitInfoDic setObject:reason forKey:@"reason"];
 } else {
  NSString *remark = textView.text;
  [self.submitInfoDic setObject:remark forKey:@"remark"];
 }
}

四 键盘弹出的遮挡问题

还是在之前的分析中,我们知道在键盘弹出和收起时,系统都会发出对应的通知,所以我们可以在收到键盘弹出的时候判断键盘的位置和当前输入文本框的位置,如果有遮挡,就将当前视图进行一个向上平移,在收到键盘回收的通知时就平移到原先的位置。所以,主要分为2步:

注册键盘弹出和收起的通知事件

#pragma mark notification 通知管理
/**
 * @brief 通知注册
 * @return
 */
- (void)registNotification
{
 // observe keyboard hide and show notifications to resize the text view appropriately
 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil];
 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil];
}

实现收到键盘弹出和收起通知事件的响应事件

#pragma mark --键盘弹出收起管理
-(void)keyboardWillShow:(NSNotification *)note{
 CGRect frame = self.textViewFrame;
 //获取键盘高度
 NSDictionary* info = [note userInfo];
 CGSize kbSize = [[info objectForKey:UIKeyboardFrameEndUserInfoKey] CGRectValue].size;
 //140是文本框的高度,如果你的文本框高度不一样,则可以进行不同的调整
 CGFloat offSet = frame.origin.y + 140 - (self.view.frame.size.height - kbSize.height);
 //将试图的Y坐标向上移动offset个单位,以使界面腾出开的地方用于软键盘的显示
 if (offSet > 0.01) {
  WEAKSELF
  [UIView animateWithDuration:0.1 animations:^{
   weakSelf.tableView.contentOffset = CGPointMake(0, offSet);
  }];
 }
}
-(void)keyboardWillHide:(NSNotification *)note{
 [UIView animateWithDuration:0.1 animations:^{
  self.tableView.contentOffset = CGPointMake(0, 0);
 }];
}

多时候,我们有多个输入文本框,在我们的示例中,我们就有两个输入文本框,这时候我们收到通知的时候怎么判断是哪个文本框呢?在前的分析中,我们知道,在发出通知之前,系统会调用输入文本框代理的 textFieldShouldBeginEditing: 方法来判断是否允许编辑,那么我们可以在这个方法中判断是哪一个文本框以及文本框的具体位置等等,然后在键盘弹出时通过为止比较确定是否平移,以及平移的offset。

- (BOOL)textViewShouldBeginEditing:(YYTextView *)textView{
 //获取当前输入文本框相对于当前view的位置
 self.textViewFrame = [textView convertRect:textView.frame toView:self.view];
 return YES;
}

您可能感兴趣的文章:

  • iOS 防键盘遮挡的实例
  • 解决移动端 ios 系统键盘遮挡的问题
  • IOS NSNotification 键盘遮挡问题的解决办法
  • IOS数字键盘左下角添加完成按钮的实现方法
  • iOS中键盘 KeyBoard 上添加工具栏的方法
  • iOS中只让textField使用键盘通知的实例代码
  • IOS 键盘挡住输入框的问题解决办法
  • 代码详解ios键盘收起问题
(0)

相关推荐

  • iOS 防键盘遮挡的实例

    当我们在UITextField输入数据时经常弹出键盘遮挡界面,解决方法是:在弹出键盘时将整个UIVIew向上移动,在键盘消失时,UIVIew还原. 实例代码如下: @interface ViewController ()<UITextFieldDelegate> @property(nonatomic,strong)UITextField* tf; @end @implementation ViewController - (void)viewDidLoad { [super viewDidL

  • 解决移动端 ios 系统键盘遮挡的问题

    亲测 ios 9 ,ios10 系统有效,其他请自行测试,建议通过判断系统类型来动态引入此脚本 var isIPHONE = navigator.userAgent.toUpperCase().indexOf("IPHONE")!= -1; if(isIPHONE){ // 元素失去焦点隐藏iphone的软键盘 function objBlur(obj,time){ var startTime=0,endTime=0, time = !time?30:time, docTouchend

  • iOS中只让textField使用键盘通知的实例代码

    代码: #import "ViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. //为textField增加键盘事件 [[NSNotificati

  • IOS数字键盘左下角添加完成按钮的实现方法

    IOS数字键盘左下角添加完成按钮的实现方法 实现代码: - (void)addDoneButtonToNumPadKeyboard { UIButton *doneButton = [UIButton buttonWithType:UIButtonTypeCustom]; if (systemVersion < 8.0){ doneButton.frame = CGRectMake(0, 163, 106, 53); }else{ doneButton.frame = CGRectMake(0,

  • 代码详解ios键盘收起问题

    在开发过程中,我们经常会用到UITextField.UITextView等文本框,然后这些文本框在点击之后会自动成为第一响应者(FirstResponder),并自动弹出软键盘.然而,没有自动定义好的软键盘的回收.今天,我在开发过程中就遇到了这个问题,首先,软键盘收起会发生在两种情况下,一是当前区域为非第一响应者,二是当前区域的输入结束.具体解决方案有两种: 1.在当前页面设置点击事件,当点击事件发生时,注销当前视图的第一响应者或者设置当前摄入结束.当点击事件发生在非选中区域时,则键盘会自动回收

  • IOS 键盘挡住输入框的问题解决办法

    IOS 键盘挡住输入框的问题解决办法 在iOS开发发现一个问题,有时输入框位于低出时,当编辑输入时,弹出的键盘会挡住输入框,令用户看不清楚实时的输入情况,使界面交互极度不友好. 经过查资料终于解决了这个问题. 解决思路: 1. 输入框监听UIControlEventEditingDidBegin事件,当用户开始输入时,将整个view上移. 2. 输入框监听UIControlEventEditingDidEnd事件,当用户结束输入时,将整个view下移,恢复到原位置. 输入框监听事件: [text

  • iOS中键盘 KeyBoard 上添加工具栏的方法

    iOS中 键盘 KeyBoard 上怎么添加工具栏? 如图中所示 在键盘上面加一条工具栏 大致思路是提前创建好工具栏,在键盘弹出的时候将工具栏显示出来,在键盘消失的时候让工具栏隐藏 上代码 设置两个变量 UIView * _toolView; //工具栏 UITextField *textField;// 输入框 呼出键盘用 创建工具栏 输入框 添加键盘弹出 消失的通知 - (void)viewDidLoad { [super viewDidLoad]; // Do any additional

  • IOS NSNotification 键盘遮挡问题的解决办法

    IOS NSNotification 键盘遮挡问题的解决办法 从键盘通知中获得键盘尺寸 键盘尺寸存在于NSNotification中. 1:在AddDrinkViewController中添加keyboardDidShow和keyboardDidHide方法 2:在viewWillAppear中注册UIKeyboardDidshowNotification与UIKeyboardDidHideNotification. 3:在viewWillDisappear中取消对所有事件的订阅注册 4:在Ad

  • iOS项目开发键盘弹出遮挡输入框问题解决方案

    在iOS或Android等移动端开发过程中,经常遇到很多需要我们输入信息的情况,例如登录时要输入账号密码.查询时要输入查询信息.注册或申请时需要填写一些信息等都是通过我们键盘来进行输入的,在iOS开发过程中,一般用于进行输入信息的有两类:UITextField和UITextView,前者是单行输入文本框,后者是可滑动的多行输入文本框,在这整个开发过程中,我们需要控制键盘的弹出和收起.在输入结束的时候获取输入的信息,此外,我们还需要保证在键盘弹起的时候不遮挡我们输入的文本框.今天,我们就主要来说一

  • iOS键盘弹出遮挡输入框的解决方法

    本文为大家分享了iOS键盘弹出遮挡输入框的解决方法,供大家参考,具体内容如下 问题:输入框被键盘遮挡 期望效果:输入框位于键盘上方 解决思路: 监听键盘出现和消失的状态,当键盘出现时,当前视图上移,当输入完成收起键盘时,视图回到初始状态. 难点:视图向上平移的距离 原理都差不多,oc版参考代码: self.phoneInput = [UITextField new]; self.phoneInput.placeholder = @"请输入..."; [self.view addSubv

  • Android实现登陆页logo随键盘收放动态伸缩(完美解决键盘弹出遮挡控件的问题)

    在最近的两个项目中,项目需求要求我们实现 /*登陆页面的内容能够随着键盘的弹出而被顶上去,避免键盘遮挡住登陆按钮*/ 这样的效果,宝宝心里苦呀,本来半天搞定的事还非得折腾一下,好吧我妥协,毕竟我还是一只非常注重用户体验的猿. 那就做吧,初步定下的方案是输入框和登陆按钮大小不变,在键盘弹出的时候让logo的大小和位置进行改变,从而给键盘腾出位置,当然在键盘收起的时候还要给它还原一下,就像什么都没发生一样,嗯对,就是这样,说了这么多,放张图先感受一下效果吧: 接下来上正餐,布局上比较简单,注意给图片

  • 解决react-native软键盘弹出挡住输入框的问题

    这是效果: 代码: import React, {Component} from 'react'; import { View, Text, Button, StyleSheet, TextInput, ScrollView, KeyboardAvoidingView, Dimensions } from 'react-native'; import { StackActions, NavigationActions, withNavigation } from 'react-navigatio

  • android虚拟键盘弹出遮挡登陆按钮问题的解决方法

    Android虚拟键盘的弹起会遮挡住部分ui,虽然通过在清单文件中设置,可以随着虚拟键盘的弹出,布局往上推,但是面对登陆界面时,并没有太大的作用,这样就会导致用户体验不好:开发中既然出现了就的解决:先说先解决的思路:获取到屏幕的高度.虚拟键盘的高度,布局的高度,用屏幕的高度减去布局的高度,用高度差和虚拟键盘的高度进行对比:代码实现如下: private LinearLayout logo_layout; private ImageView iv_logo; private int sh; pri

  • 解决Android软键盘弹出覆盖h5页面输入框问题

    之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位置 触发条件:输入框获取焦点,弹出软键盘 表现:软键盘 覆盖 h5页面中的输入框 问题分析: 1.发现问题:当前页面中box为flex布局,内容为上下固定高,中间自适应(中间区域内容过多会出现滚动条,input框在wrapper的底部),input获取焦点,手机键盘弹出,input未上移到可视区内,

  • Android开发之弹出软键盘工具类简单示例

    本文实例讲述了Android开发之弹出软键盘工具类.分享给大家供大家参考,具体如下: package com.maobang.imsdk.util; import android.content.Context; import android.view.inputmethod.InputMethodManager; import android.widget.EditText; import java.util.Timer; import java.util.TimerTask; /** * 让

  • Android监听软键盘弹出与隐藏的两种方法

    需求: 现在有一个需求是点击一行文本框,弹出一个之前隐藏的输入框,输入完成后按返回键或者其他的东西隐藏键盘和输入框,将输入框的内容填充到文本框中. 实现: 拿到这个需求的第一反应就是写一个监听来监听键盘的显示和隐藏来控制输入框的显示和隐藏,控制文本框中的内容. 所以我做了如下操作: 指定android:windowSoftInputMode="adjustResize|stateAlwaysHidden"这个的做法是为了让键盘弹出时改变布局. 让Activity实现Layoutchan

  • 手机软键盘弹出时影响布局的解决方法

    移动端软键盘弹出时影响布局该如何解决 1)前段时间作的移动端页面,因为高度只有1页所以用了height:100%;width:100%; ios下点击输入框弹出软键盘时,布局没有大影响. 当输入框可能被软键盘压到时,在一部分安卓下却出了问题,华为自带浏览器和UC会有布局上的问题. 原因可能是因为,软键盘弹出时,改变了height,使height:100%,不能达到原来的高度. 解决办法: $(document).ready(function () { $('body').height($('bo

  • 基于Vue.js+Nuxt开发自定义弹出层组件

    今天给大家分享VPopup 基于Vue.js构建的轻量级移动端弹出框组件,详情如下所示: 一款融合了Vant.NutUI等热门Vue组件库中的Popup弹层.Dialog对话框.Toast提示框.ActionSheet动作面板框.Notify通知框等功能. 快速使用 在main.js中引入组件 // 引入弹窗Popup import Popup from './components/popup' Vue.use(Popup) 支持如下两种 组件式 及 函数式 调用插件. 组件式 <templat

随机推荐