解决uniapp,textarea拉起页面被顶起和键盘被输入框遮挡的问题。

1:Android、ios 同时解决;

2:我们在开发的时候会发现textarea或者input拉起键盘的时候整个页面被顶起了,header也被顶没了;官方给了:adjustPosition='false'属性,设置完之后页面就不会被顶起,但是键盘把输入框挡住了,就很恶心;

3:我的实现思路是,adjustPosition='false' ;用@keyboardheightchange监听键盘的高度;在textarea下面给一个view标签并且加高度;再通过uni.pageScrollTo 在键盘拉起的时候上滑页面;

上代码
<!-- 你的其他dom元素 写多少都可以 -->

<view>
     <textarea  border='none' :adjustPosition='false'   placeholder="请输入200字以内的申请人意见" count maxlength='500' @keyboardheightchange='keyboardheightchange' style="width: 100%;"   @blur="hideBorad"></textarea>
     <view :style="{'height':(showKeyNum==1?400:keyboardHeight)+'rpx'}"> </view>
</view>

 export default{
	data() {
			return { 
				keyboardHeight: 0, // 键盘高度
				showKeyNum: 0,//键盘打开的次数
            }
        },
        methods: {
			keyboardheightchange(e) {
				this.keyboardHeight = e.detail.height;
				this.showKeyNum++;
				setTimeout(() => {
					uni.pageScrollTo({
						scrollTop: 2000
					});
				}, 200)
			},
		    hideBorad() {
			this.showKeyNum = 2;
			this.keyboardHeight = 0;
		   }
       }
 }

1:解释一下为什么要设置键盘打开的次数:是因为keyboardheightchange第一次拉起的时候键盘的高度监听不到,所以当等于1 的时候给了一个默认的高度;

2; @blur="hideBorad" 为什么要设置这个事件,是因为Android系统下keyboardheightchange关闭的时候不触发;

3:真的是各种坑等着你跳,大家有好的方法也可以提供过来;谢谢参考!

### UniApp键盘弹出时顶起输入框解决方案 #### 使用 `adjustPosition` 属性控制页面行为 对于 textareainput 组件,在键盘弹出时可能会导致整个页面顶起,甚至 header 被隐藏。官方提供了一个属性 `adjustPosition='false'` 来防止这种情况发生。不过这样做虽然解决页面顶起问题,但也带来了新的困扰——键盘会遮住输入框[^1]。 ```html <textarea adjust-position="false"></textarea> ``` #### 动态调整输入框位置的方法 为了既不让页面整体移动又能让用户正常看到并操作输入框,推荐采用动态调整输入框位置的方式。具体来说: -输入框通过 CSS 设置为 fixed 定位; - 利用 @focus @blur 事件监听器来捕获焦点变化时刻; - 获取到键盘的高度后修改输入框距离屏幕底部的距离(即 bottom 值),当失去焦点时再将其重置回初始状态; - 对于包含页面头部内容区的容器,可以通过 padding-bottom 的方式预留足够的空间给输入框以及其下方可能存在的其他元素显示出来,并且保持头部固定不变; - 整体布局建议使用 flexbox 实现响应式的垂直排列结构,其中内容区应具有自动增长的能力并且支持纵向滚动以便容纳更多数据[^2]。 ```css /* 输入框样式 */ .input-box { position: fixed; width: calc(100% - 2 * var(--safe-area-inset-left)); left: var(--safe-area-inset-left); } /* 页面主体样式 */ .page-container { display: flex; flex-direction: column; min-height: 100vh; .header { height: 50px; /* 如果不需要固定的头部高度可省略此行 */ } .content-area { flex-grow: 1; overflow-y: auto; } } ``` ```javascript // Vue 方法内处理逻辑 methods: { onFocus(event) { const keyboardHeight = event.detail.value.height || 300; // 默认值用于模拟测试环境下的情况 this.$refs['inputBox'].$el.style.bottom = `${keyboardHeight}px`; document.querySelector('.page-container').style.paddingBottom = `${this.getInputBoxHeight() + keyboardHeight}px`; }, onBlur() { this.$refs['inputBox'].$el.style.removeProperty('bottom'); document.querySelector('.page-container').style.removeProperty('padding-bottom'); }, getInputBoxHeight() { return parseFloat(window.getComputedStyle(this.$refs['inputBox'].$el).height.replace('px', '')); } } ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值