uniapp——弹出键盘遮挡住输入框 textarea,处理方法

案例

在写输入框的时候会遇见 键盘遮挡住部分textarea框的一部分,使用cursor-spacing处理即可

修改后:

其他问题:

调起键盘输入时,不希望上方的内容被顶上去

代码

html 复制代码
<view class="commentBox" :style="'bottom:'+KeyboardHeight+'px;'">
	<textarea placeholder="请输入评论" v-model="pingLun" confirmType="return" maxlength="-1" auto-height
		:focus="focus" @blur="onBlur" cursor-spacing="15" :adjust-position="false" class="area" :fixed="true" />
	<button :class="{'sendBtn':true,'greyColor':!pingLun}" :disabled="!pingLun">发送</button>
</view>

<!-- 评论按钮 -->
<view class="funcBtn pinglun" @click="onfocus">
	<image src="/static/images/circle/comment.png" mode="aspectFill"></image>评论
</view>
javascript 复制代码
const pingLun = ref('') //输入评论内容
const focus = ref(false) //默认不聚焦
const KeyboardHeight = ref('') //键盘高度
onReady(() => {
	uni.onKeyboardHeightChange(res => {
		KeyboardHeight.value = res.height;
	})
})
onLoad((options) => {
	// 如果来自于评论
	if (options.fromType == 'comment') {
		focus.value = true
	}
})
// 评论聚焦
function onfocus() {
	throttle(() => {
		focus.value = true
	})
}
// 失焦
function onBlur(){
	focus.value = false
}
css 复制代码
.commentBox {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40rpx;
	background-color: #fff;
	border-top: 1rpx solid #D8D8D8;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	z-index: 99;

	.area {
		font-size: 26rpx;
		width: 100%;
		padding: 30rpx 0;
		margin-right: 20rpx;
		max-height: 120rpx;
	}

	.sendBtn::after {
		position: unset !important;
		border: unset;
	}

	.sendBtn {
		flex-shrink: 0;
		margin: 0;
		padding: 0;
		line-height: 1;
		color: #F364B3;
		font-size: 28rpx;
		background-color: #ffffff00;
	}

	.greyColor {
		color: #F364B340;
	}
}
相关推荐
平凡的阿泽7 分钟前
uniapp编译的app在ios上内存泄漏了
uni-app
大叔_爱编程1 小时前
wx203基于ssm+vue+uniapp的教学辅助小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
咸虾米_11 小时前
uniapp微信小程序获取用户手机号uniCloud云开发版
微信小程序·小程序·uni-app·unicloud·获取手机号
伊泽瑞尔.20 小时前
uniapp自定义目录tree(支持多选、单选、父子联动、全选、取消、目录树过滤、异步懒加载节点、v-model)vue版本
uni-app
lyz24685920 小时前
uniapp uni-swipe-action滑动内容排版改造
uni-app
IT199520 小时前
uniapp笔记-自定义分类组件
前端·笔记·uni-app
MaCa .BaKa20 小时前
27-衣橱管理系统(小程序)
java·vue.js·spring boot·小程序·架构·uni-app·maven
Json____21 小时前
使用uni-app框架 写电商商城前端h5静态网站模板项目-手机端-前端项目练习
前端·uni-app·h5电商·手机端商城·前端手机端商城·静态商城
耶啵奶膘1 天前
uniapp-小程序地图展示
javascript·小程序·uni-app
yede2 天前
微信小程序 - 获取权限
微信小程序·uni-app