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;
	}
}
相关推荐
吴传逞2 天前
记一次uniapp微信小程序开发scss变量失效的问题
微信小程序·uni-app·scss
2501_915921432 天前
小团队如何高效完成 uni-app iOS 上架,从分工到工具组合的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_916008892 天前
uni-app iOS 文件管理与 itools 配合实战,多工具协作的完整流程
android·ios·小程序·https·uni-app·iphone·webview
!win !3 天前
uni-app项目Tabbar实现切换icon动效
小程序·uni-app
xw53 天前
uni-app项目Tabbar实现切换icon动效
前端·uni-app
2501_916007473 天前
uni-app iOS 文件调试常见问题与解决方案:结合 itools、克魔、iMazing 的实战经验
android·ios·小程序·https·uni-app·iphone·webview
豆豆(设计前端)3 天前
使用 Uni-app 打包 外链地址APK 及 iOS 注意事项
ios·uni-app
jingling5553 天前
uniapp | 解决组件样式不生效问题
前端·css·uni-app·html·学习方法
^Rocky3 天前
微信小程序(uniapp)实现连接蓝牙
微信小程序·uni-app·蓝牙连接
2501_915918413 天前
uni-app 项目 iOS 上架踩坑经验总结 从证书到审核的避坑指南
android·ios·小程序·https·uni-app·iphone·webview