页面内容超出一屏时，按钮元素使用fixed定位到底部且z-index为999，uni-easyinput 增强输入框获取焦点后，显示光标；上下滑动屏幕滚动时，按钮元素无法遮挡uni-easyinput 增强输入框的光标
4***@qq.com
- 发布：2024-04-17 13:44
- 更新：2024-04-18 11:47
- 阅读：40
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 14.2.1 (23C71)
HBuilderX类型： 正式
HBuilderX版本号： 3.99
手机系统： iOS
手机系统版本号： iOS 17
手机厂商： 苹果
手机机型： iphone14pro
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
元素使用fixed定位 可以遮挡uni-easyinput 增强输入框的光标
元素使用fixed定位 可以遮挡uni-easyinput 增强输入框的光标
实际结果：
元素使用fixed定位且z-index为999，无法遮挡uni-easyinput 增强输入框的光标
元素使用fixed定位且z-index为999，无法遮挡uni-easyinput 增强输入框的光标
bug描述：
元素使用fixed定位且z-index为999，无法遮挡uni-easyinput 增强输入框的光标
已复现该问题，此为IOSinput框光标特有问题，无法被任何元素覆盖，建议在被遮挡时，将input框隐藏或者设置margin-left: -100%; text-indent: -999em;来使光标错位或者在滑动时取消输入框的聚焦。
以下为使光标错位的示例代码：
<template>
<view>
<view class="container">
<view class="fixed">
遮罩层
</view>
<input type="text" class="input" style="height: 100%;background-color: blue;" v-model="text" />
</view>
</view>
</template>
<script>
export default {
data() {
return {
text: "",
}
},
}
</script>
<style lang="scss">
.container {
height: 18px;
}
.input {
margin-left: -100%;
text-indent: -999em;
}
.fixed {
position: fixed;
background-color: red;
color: white;
}
</style>