避免键盘弹出时遮挡输入框

避免键盘弹出时遮挡输入框

在iPhone的短信对话界面中,当点击下方的输入框时,整个信息列表界面的大小会自动发生改变并保证界面内容不被键盘所覆盖.要实现这种效果需要在键盘将要弹出时使用代码动态的改变整个View的大小.

首先在viewDidLoad中注册键盘弹出事件监听器:

[[NSNotificationCenterdefaultCenter] addObserver:selfselector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotificationobject:nil];


在键盘弹出时,获得键盘高度,动态改变View大小:

-(void) keyboardWillShow:(NSNotification *)note

{

NSLog(@"keyboardWillShow %d",keyboardIsShowing);

CGRect keyboardBounds;

[[note.userInfo valueForKey:UIKeyboardBoundsUserInfoKey] getValue: &keyboardBounds];

keyboardHeight = keyboardBounds.size.height;

NSLog(@"keyboardHeight = %d",keyboardHeight);

if (keyboardIsShowing == NO)

{

keyboardIsShowing = YES;

NSLog(@"change %d %f",keyboardIsShowing,self.view.frame.size.height);

CGRect frame = self.view.frame;

frame.size.height -= keyboardHeight;

[UIView beginAnimations:nil context:NULL];

[UIView setAnimationBeginsFromCurrentState:YES];

[UIView setAnimationDuration:0.3f];

self.view.frame = frame;

[UIView commitAnimations];

}

}

需要注意的是在界面退出时务必removeObserver.



转载请注明:来自ZhaoZhe's Blog
本文地址:http://zhao-zhe.appspot.com/?p=138001

### uniapp 中键盘弹出遮挡输入框的解决方案 对于uniapp中遇到的键盘弹出遮挡输入框的问题,可以采取多种方法来解决这个问题。 #### 使用原生`<input>`组件并调整属性设置 通过使用uniapp自带的 `<input>` 组件替代其他UI库中的自定义组件,并适当配置其属性能够有效减少因第三方插件带来的兼容性问题。具体来说,在`<input>`标签内添加特定属性如 `:always-embed="true"` 和`:adjust-position="true"` 可以让应用更好地适应不同设备上的软键盘行为[^1]: ```html <input type="text" :always-embed="true" :adjust-position="true" /> ``` #### 设置固定定位样式 为了防止页面布局因为软键盘弹出而发生不必要的变动,可以在涉及输入操作的部分采用固定的CSS位置策略(`position: fixed`)。这有助于保持界面元素相对稳定的位置关系,尤其是在iOS平台下的微信小程序环境中特别有用[^2]: ```css .input-container { position: fixed; bottom: 0; } ``` #### 动态计算视口高度变化 针对某些特殊场景下可能出现的内容区域被隐藏的情况,则可以通过监听窗口尺寸的变化动态调整容器的高度或滚动条的位置。例如,在Vue框架下利用生命周期钩子函数监听页面加载完成后的首次渲染以及后续任何可能导致DOM结构改变的操作: ```javascript import { onMounted, ref } from "vue"; export default function useKeyboardAdjustment() { const windowHeight = ref(window.innerHeight); window.addEventListener('resize', () => { windowHeight.value = window.innerHeight; }); onMounted(() => { // 初始化处理逻辑... }); return {windowHeight}; } ``` 以上几种方式可以根据实际项目需求灵活组合运用,从而达到最佳用户体验效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值