uniapp 小程序输入框的placeholder会穿透到弹出层

此情况常发生于表单,点击表单中的选择器、弹出层,会发现输入框的placeholder会浮现在选择器上层,点击会弹出软键盘,怎么调整输入框与选择器、弹出层的层级都无法解决该问题。

问题原因

  • input仅在微信小程序、支付宝小程序、字节跳动小程序、飞书小程序、QQ小程序中且input置焦时表现为原生组件,其中支付宝小程序的input仅为text且置焦时表现为原生组件。
  • textarea仅在微信小程序、百度小程序、字节跳动小程序、飞书小程序表现为原生组件。

原生控件的层级是最高的,前端组件无法覆盖原生控件的层级。

解决方案

  1. 打开弹出层时将所有的输入框禁用
  2. 弹窗显示逻辑跟input相反,使用visibility对input进行占位隐藏
  3. 尽可能使用跳转其他页面来完成此需求,而不是弹窗。
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在uniapp中弹出输入框,可以使用uni-app官方提供的uni.showModal方法,结合自定义输入框组件来实现。具体步骤如下: 1. 在pages目录下创建一个新的文件夹,用于存放自定义输入框组件,例如命名为“custom-input”。 2. 在“custom-input”文件夹中创建一个新的vue文件,例如命名为“custom-input.vue”。 3. 在“custom-input.vue”文件中编写自定义输入框的模板和样式。 4. 在“custom-input.vue”文件中定义一个名为“showInput”、类型为Boolean的prop,用于控制输入框的显示和隐藏。 5. 在“custom-input.vue”文件中定义一个名为“inputValue”、类型为String的data,用于存储输入框中的文本内容。 6. 在“custom-input.vue”文件中定义一个名为“confirmInput”、类型为Function的事件,用于在用户点击输入框中的“确定”按钮后将输入框中的文本内容传递给父组件。 7. 在父组件中引入“custom-input”组件,并在需要弹出输入框的地方使用uni.showModal方法弹出模态框。 8. 在uni.showModal方法的回调函数中判断用户点击的是“确定”还是“取消”按钮,并将“showInput”属性设置为false,隐藏输入框。 9. 在uni.showModal方法的回调函数中如果用户点击了“确定”按钮,则调用“custom-input”组件的“confirmInput”事件,将输入框中的文本内容传递给父组件。 10. 在父组件中通过监听“custom-input”组件的“confirmInput”事件获取输入框中的文本内容,并进行相应的处理。 示例代码如下: custom-input.vue: ```html <template> <view class="custom-input" v-show="showInput"> <input v-model="inputValue" placeholder="请输入内容"/> <button @tap="confirmInput">确定</button> </view> </template> <script> export default { props: { showInput: { type: Boolean, default: false } }, data() { return { inputValue: '' } }, methods: { confirmInput() { this.$emit('confirmInput', this.inputValue) } } } </script> <style> .custom-input { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; border: 1px solid #ddd; padding: 16px; border-radius: 8px; } input { width: 100%; margin-bottom: 16px; border: none; border-bottom: 1px solid #ddd; font-size: 16px; outline: none; } button { background-color: #f5222d; color: white; border: none; border-radius: 4px; padding: 8px 16px; font-size: 14px; cursor: pointer; } </style> ``` 页面中使用: ```html <template> <view> <button @tap="showInput = true">弹出输入框</button> <custom-input :showInput="showInput" @confirmInput="onConfirmInput"></custom-input> </view> </template> <script> import CustomInput from '@/pages/custom-input/custom-input.vue' export default { components: { CustomInput }, data() { return { showInput: false, inputValue: '' } }, methods: { onConfirmInput(value) { // 处理输入框中的文本内容 console.log('输入框中的文本内容为:', value) } } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值