uni-app-开发碰到的各种问题(1)

最新推荐文章于 2025-06-28 22:16:17 发布

overforget

最新推荐文章于 2025-06-28 22:16:17 发布

阅读量592

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： html5

本文链接：https://blog.youkuaiyun.com/weixin_42367621/article/details/109113670

微信小程序专栏收录该内容

1 篇文章

订阅专栏

本文主要讨论了uni-app中textarea原生组件在安卓设备上输入文字时，输入文字层级高于弹窗的问题，以及input组件在安卓上placeholder重叠的现象。针对这两个问题，提出了具体的解决方案：通过监听`onFocus`和`blur`事件来动态调整placeholder的显示状态，从而避免输入框重叠问题。此外，还提供了涉及前端开发、小程序、uni-app的标签供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

1.uni-app原生组件textarea出现安卓输入文字时，点击弹窗看到输入文字层级比弹窗高
2.input原生组件placehoder在安卓上出现重叠现象
代码：

<view class="box-input-bottom">
    <textarea maxlength="100" class="area-text" v-show="androidFlag"
         rows="6"
         placeholder="请输入"
         @input="descInput"
         v-model="writeInput"></textarea>
     <span class="box-input-bottom-ran">{{remnant}}/100</span>
   </view>
<view class="search">
	<input
		v-model="keywords"
		type="text"
		confirm-type="search"
		@confirm="confirmSearch"
		@input="onFocus"
		@blur="blurAccount"
		class="search-input" />
		<text class="placeholder" v-if="placeAccount">请输入搜索内容</text>
		<image class="search-icon" src="@/static/icons/goods/search_icon.png" />
		<image v-if="keywords" @click="clearSearch" class="close-icon" src="@/static/icons/goods/close-upload@2x.png" />
</view>

原因分析：

在小程序内部组件在安卓手机上问题

解决方案：

onFocus () {
	this.placeAccount = false
},
blurAccount () {
	this.placeAccount = true
},```