textarea层级过高覆盖页面问题解决方式

晒晒u

已于 2022-07-28 13:44:20 修改

阅读量862

点赞数

文章标签： javascript 前端 html

于 2022-07-22 15:53:09 首次发布

本文链接：https://blog.csdn.net/fairyfree/article/details/125933219

版权

本文介绍了如何通过使用cover-view和v-if控制来解决textarea层级过高导致的页面问题，方法包括使用真textarea和假textarea结合，确保用户体验。重点在于利用伪元素和事件处理避免遮挡其他功能。

摘要由CSDN通过智能技术生成

由于textarea层级过高，导致页面过长或有按钮的时候 textarea会遮盖页面其他功能，点击就是输入框。

解决方式有两种

1，cover-view （用法见uniapp官方文档）
2，用v-if控制textarea显隐，利用dom制造一个假的textarea（亲测有效）详情如下

<view class="part bg-white p20">
	<view class="remark pb20">备注</view>
	<view @tap="showTextarea = false" v-show="showTextarea" class="placeholder" :class="{'placeholder1':subData.remark}">
		{{ subData.remark ||'请输入备注'}}
	</view>
	<view>
		<u--textarea  :cursor="resStart" v-if="!showTextarea" :focus="!showTextarea" 
		 @blur ="areaBlur" :maxlength='100' :height="80" v-model="subData.remark"
		  placeholder="请输入备注" ></u--textarea>
	</view>
</view>```

focus一定要加不然就是点击两次才能输入！

textarea中的cursor是为了显示光标的，因为做了这个假的输入完失焦后再点击每次光标都在最前面为了保证用户体验最好加上这个（注意data中别忘定义变量）

areaBlur() {
	this.showTextarea = true
	this.resStart = this.subData.remark.length
}

样式如下

.placeholder1 {
		padding:15rpx;
		border-width: 0.5px !important;
		border-color: #dadbde !important;
		border-style: solid;
		border-radius: 4px;
		font-size: 14px;
		color: #c0c4cc;
		min-height: 200rpx;
		box-sizing: border-box;
		color:#606266;
	}