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;
	}
}
相关推荐
貂蝉空大1 小时前
uni-app开发安卓和ios app 真机调试
android·ios·uni-app
程楠楠&M1 小时前
uni-app(位置1)
前端·javascript·uni-app·node.js
破z晓1 小时前
uniapp 整合openlayers 编辑图形文件并上传到服务器
前端·javascript·uni-app
寰宇软件6 小时前
PHP房屋出租出售高效预约系统小程序源码
前端·小程序·uni-app·vue·php
尚学教辅学习资料7 小时前
基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例
spring boot·uni-app·宠物
真的不想写实验7 小时前
uniapp引入ucharts组件不显示
uni-app
烂蜻蜓7 小时前
深入解析 Uniapp 的页面结构
前端·css·vue.js·uni-app·html·html5
Little_Code7 小时前
关于uniapp使用renderJS中调用父类方法和参数的使用
前端·javascript·uni-app
imsopoor7 小时前
【uniapp*vue3】app/h5 webview通讯方案
uni-app
abs6257 小时前
uniapp使用uts插件启动原生安卓Service
android·uni-app·uniapp uts插件·uniapp 安卓服务