微信小程序安卓固定弹窗中textarea的placeholder会被弹出去

在项目中碰到一个问题,就是安卓机上,如果fix固定一个弹窗,这个弹窗中有textarea的话, 点击弹出弹窗,textarea获得焦点的时候,placeholder和value会被弹出到背景上.如图:

弹窗wxml代码:

 1 <view class="common-modal" wx:if="{{!actionSheetHidden}}">
 2     <view class="app_container ">
 3
 4       <view class="addPic">
 5         <textarea class="textBox" fixed="true" bindinput="getMemo" value="{{memo}}" placeholder="为了保障你的权益,请尽可能详细的提交留言信息"/>
 6         <view class="picList">
 7               <view class="picList" >
 8                 <image wx:for="{{imgList}}" wx:for-item="itemImg" wx:key="*this" id="{{‘list_‘+index}}" bindload="imageOnload" src="{{newImgUrl + itemImg}}"  bindtap="showResizeModal" data-src="{{newImgUrl + itemImg}}"></image>
 9               </view>
10           <image bindtap="chooseImages" wx:if="{{imgList.length < 5}}" src="../../images/wx/photo.png"></image>
11         </view>
12       </view>
13       <view class="submit">
14         <button  type="primary" bindtap="submit" class="btn btn-success  btn-block">提交</button>
15         <button  type="default" bindtap="closeActionSheet" class="btn btn-default  btn-block">取消</button>
16       </view>
17
18     </view>
19   </view>

上面的代码是修改后的代码.其它都不重要,重要的两点:

一个是 textarea控件如果是fix固定定位, 一定要加上 fixed="true"属性(代码中划线部分);官方文档中有强调

另一个就是如果用到input或者textarea控件尽量避免使用actionSheet,自己写一个固定定位的弹窗吧

时间: 2024-10-16 12:19:19

微信小程序安卓固定弹窗中textarea的placeholder会被弹出去的相关文章

如何使用微信小程序开发一个弹窗页面(附源码)

在小程序的开发过程中,我们肯定会遇到开发一个弹窗页面的情况,我们先看一下小程序官方对于弹窗页面的解释.API的接口如下 从官方给出的代码示例来看,想当简单,就像一个asert,并不能看出弹窗的真实需求.所以今天HTML51.COM就写了一个弹窗小程序教程,供大家学习参考.首页我们先看一下动态的效果图: 我们首先看到的是首页代码: <view class="copyright"> <view class="copyright_item">Cop

iView Weapp微信小程序UI组件库中i-input的使用

iView Weapp微信小程序UI组件库为小程序的开发提供了良好的交互界面,组件库自定义了一系列组件,具有较强的开发友好性,但一些组件与微信小程序原生组件的使用方式有差异. i-input组件是该框架自定义的输入框组件,与微信中input具有相同功能. 在使用i-input输入值时,可以增加其bind:change="myInput" 属性,如: wxml: <i-input type="number" right  maxlength="2&qu

微信小程序安卓机使用uploadfile提示undefined错误原因

前几天开发小程序,在使用微信的uploadfile接口上传图片时,调试工具以及ios的手机无论是拍照,还是选择手机中的图片都可以正常上传图片,而安卓手机在上传图片时,微信总是返回error,且错误提示是undefined(微信返回,数据还没有上传到服务器) 于是网上找资料,找前辈问,未果,总是时好时坏也找不到原因后来,偶然发现,同时上传的字段,如果填写数字,则可以成功提交,如果填写中文则会报错. 于是想到,是不是编码问题,抱着试一试的心态,让前端在上传数据之前加个encodeURI,然后我解析的

微信小程序封装自定义弹窗

最近在做小程序的登录,需要同时获取用户手机号和头像昵称等信息,但是小程序又不支持单个接口同时获取两种数据,因此想到自定义一个弹窗,通过弹窗按钮触发获取手机号事件.记录一下. 具体代码如下: 业务代码中: 在业务代码中引入dialog组件即可 <dialog visible="{{dialogVisible}}" showFooter="{{footerVisible}}" title="测试一下"> <view class='d

微信小程序真机调试中一些小问题

今天用mpvue在写微信登录业务处理的时候,遇到了一个奇怪的问题. 想记录一下,以免未来再次踩坑. 环境是这样的,我后台是自己搭建的基于wafer2-node-sdk的业务处理API,使用微信开发者工具调试测试用户登录是没有问题的. 界面如下. 后台通过凭证发送给微信服务器获取到了userInfo. 但是到了真机调试, 就一直是在正在请求中. 而在真机运行中是没有自动清除缓存的机制的,所以如果出现莫名其妙的bug,所以,可以考虑是否是缓存带来的问题. 所以在登陆界面设置一个按钮,触发事件使用ap

微信小程序之----加载中提示框loading

loading loading只有一个属性hidden .wxml <view> <loading hidden="{{hidden}}"> 加载中... </loading> <button bindtap="changeHidden">show/hidden</button> </view> .js Page({ data:{ hidden:true }, changeHidden: fun

【微信小程序】在js中导入第三方js或自己写的js,使用外部js中的function的两种方法 import和require的区别使用方法

如下 定义了一个外部js文件,其中有一个function import lunaCommon from '../lunaCommon.js'; var ctx = wx.getStorageSync("ctx"); var filter = "/ms-code"; var apis = { //根据sc获取发货单 "findDispatchBill": function (data, success) { var url = ctx + filt

微信小程序的view标签中text如何居中?

display:flex; align-items:center; justify-content:center; 原文地址:https://www.cnblogs.com/lsyy2017/p/11128497.html

微信小程序在wxs文件中使用js方法报错问题

有时候我们会遇到这样的问题(replace.length...),先判断被操作的值是否为空,再进行下一步 if (value!=null) { } 原文地址:https://www.cnblogs.com/mxiaoli/p/12176140.html