微信小程序 --- textarea、input的文本框标签,遮罩层无法覆盖文字问题
2018-01-24 11:37
931 查看
在微信小程序中使用textarea、input时,有时候会需要用到遮罩层覆盖文本域的操作。
那么一般情况下想覆盖别的元素优先显示指定元素时,会用z-index提高优先显示的元素级别,但在小程序中是行不通的,不管调到999999999999还是更多,都是不行的,下面还有几个失败的情况
经过以上失败的总结,那么解决方案是什么呢?很简单。。。直接在textarea、input改变他的z-index。经过测试元素再次出现文字无丢失,可以隐藏时设置z-inde: -1; 显示时设置z-index: 0
那么一般情况下想覆盖别的元素优先显示指定元素时,会用z-index提高优先显示的元素级别,但在小程序中是行不通的,不管调到999999999999还是更多,都是不行的,下面还有几个失败的情况
1.使用透明度(ps:编辑器可行,但真机测试还是显示) 2.文字颜色透明(想利用光标随文字颜色变化的也不行) 3.文字颜色改变后只剩下光标闪动,想利用caret-color改变也是行不通的 4.想利用官方提供的光标位置设置的属性比方:selection-start、selection-end、cursor也是不行,并没有什么用 5.直接dispaly: none隐藏也不行,会出现文本域再次出现文字消失问题
经过以上失败的总结,那么解决方案是什么呢?很简单。。。直接在textarea、input改变他的z-index。经过测试元素再次出现文字无丢失,可以隐藏时设置z-inde: -1; 显示时设置z-index: 0
相关文章推荐
- 【微信小程序常见问题】view标签设置背景图片手机无法预览解决方案一
- 【微信小程序常见问题】view标签设置背景图片手机无法预览解决方案二
- 微信小程序开发中的一些问题总结,无法跳转,input组件变高等
- 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题
- 微信小程序——wx.navigateTo中url无法跳转问题(app.json中配置的tabBar与wx.navigateTo中url引用相同页面导致)(2017/12)
- 微信小程序文字水平垂直居中对齐问题
- 去除微信端点击input和textarea时闪现半透明灰色背景色问题
- [置顶]关于使用input type=file 标签上传文件的注意细节(上传文件 无法获取文件 问题)
- 微信小程序开发之真机测试 地图定位 map API 无法获取当前位置的问题
- html内textarea嵌套ckeditor编辑器,文本框无法显示值的问题解决
- 关于微信手机端IOS系统中input输入框无法输入的问题
- 解决微信小程序中Date.parse()获取时间戳iOS无法获取的问题
- 微信小程序开发之真机测试 地图定位 map API 无法获取当前位置的问题
- 表单文本框点击后文字内容消失的几种表现形式:textarea,input焦点的用法 .
- 关于input和textarea文本框光标定位问题
- 微信小程序中input标签详解及简单实例
- 微信小程序:wx.request之post请求后端无法获取数据的问题
- 关于微信WEBVIEW网页无法上传文件的问题,即是INPUT FILE不支持的问题
- 微信小程序中 input空间输入文字如何清空
- 微信小程序HotApp云笔记开发问题总结 之textarea不能实时保存及里面的值的获取的问题?