ios-监听键盘的弹起事件

监听键盘的弹出事件,系统是通过一个通知来实现的,所以我们要监听这个通知,就能监听到键盘的弹出事件
创建NSNotificationCenter对象用来监听通知,这里我们不关心通知的发布者,所以最后一个参数设置为nil。通知的名称是UIKeyboardWillChangeFrameNotification,就是只要键盘的frame发生改变都会发送这个通知

NSNotificationCenter * center=[NSNotificationCenter defaultCenter];
[center addObserver:self selector:@selector(keyboardWillChange:) name:UIKeyboardWillChangeFrameNotification object:nil];
keyboardWillChange:是用这个方法来监听这个通知,在这个键盘的frame改变的时候会执行这个方法,此处我是为了使键盘弹起来的时候,view会往上移,收起的时候再下来
-(void)keyboardWillChange:(NSNotification *)note
{
    //获取键盘弹起时的frame值
    CGRect rect=[note.userInfo[UIKeyboardFrameEndUserInfoKey]CGRectValue];
    //获取键盘弹起时的Y值
    CGFloat keyboardY=rect.origin.y;
    //计算view要上移动多少就是键盘的y值减去屏幕的高度就能得到需要向上移动多少,最后y值变回和屏幕高度一样就又回来了,注意这里不能说我之前比如说变了-100,
     //要想变回来变成正100那是错了,要回到原点才是对的。
    CGFloat transformY=keyboardY-self.view.frame.size.height;
    self.view.transform=CGAffineTransformMakeTranslation(0, transformY);
}
此处为打印note的结果,最后倒数第二行为键盘弹起时的frame,倒数第一行是键盘未弹起时的frame第二行是动画执行的时间。


### 解决 van-field 组件在键盘弹起时被遮挡的问题 #### 使用 `window.scrollTo` 方法调整页面滚动位置 当输入框获取焦点时,可以通过 JavaScript 的 `scrollTo` 函数动态调整页面的滚动位置,使输入框始终处于可见区域。这种方法适用于大多数场景下的软键盘遮挡问题。 ```javascript document.querySelector('van-field').addEventListener('focus', function() { window.scrollTo(0, document.body.scrollHeight); }); ``` 此方法可以有效防止输入框被软键盘遮挡[^1]。 #### 修改 CSS 样式以适应键盘高度变化 对于 iOS 设备上的固定定位元素(如 `position: fixed`),可以在检测键盘弹出时修改其样式属性,使其能够响应键盘的高度变化: ```css /* 默认状态下 */ .fixed-element { position: fixed; } /* 当键盘弹出时应用新的样式 */ .keyboard-open .fixed-element { bottom: env(safe-area-inset-bottom); /* 支持安全区 */ } ``` 通过监听窗口大小的变化来判断键盘是否已经打开,并相应地切换类名[^4]。 #### 利用第三方库管理虚拟键盘行为 为了更优雅地处理各种复杂的交互逻辑,建议引入专门用于管理移动设备上虚拟键盘行为的插件或框架,比如 `KeyboardJS` 或者 `react-native-keyboard-aware-scroll-view` (如果是在 React Native 环境下)。这些工具可以帮助开发者更好地控制键盘显示/隐藏过程中的界面布局调整。 #### 处理 placeholder 上移现象 针对某些特定版本的小程序中存在的 `placeholder` 文本上移问题,可以通过自定义样式或者更新至最新版 Vant 来修复这一 bug。确保使用的 Vant 版本是最新的,因为官方通常会在新版本中修复已知的问题[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值