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;
	}
}
相关推荐
小徐_23332 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮2 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw52 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq3 天前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app