uni-app 内置 Input 组件在自定义弹窗中不能输入问题

信息类别	详情
产品分类	uniapp/小程序
操作系统	Mac
版本号	14.2.1
HBuilderX	正式
HBuilderX版本号	4.08
工具版本号	1.46.0-9f77ed6-x64
基础库版本号	1.74.1
项目创建方式	HBuilderX

示例代码：

<template>  
    <view class="wrap">  
        <button @click="onClick">按钮</button>  
        <input type="text" placeholder="请输入" />  

        <actionsheet v-model="showSheet"></actionsheet>  
    </view>  
</template>  

<script setup>  
import { ref } from 'vue';  

const showSheet = ref(false);  
const onClick = () => {  
    showSheet.value = true;  
};  
</script>  

<style lang="scss" scoped>  
.wrap {  
    padding-top: 200rpx;  
}  
</style>

<template>  
    <view :class="classes.root" v-if="modelValue">  
        <view :class="classes.wrap">  
            <input :class="classes.input" type="text" placeholder="请输入" />  
        </view>  
    </view>  
</template>  

<script setup>  
import { createNamespace } from '@/utils';  

const { bem } = createNamespace('actionsheet');  
const classes = reactive({  
    root: computed(() => [bem()]),  
    wrap: computed(() => [bem('wrap', { bottom: type.value === 'bottom', center: type.value === 'center' })]),  
    input: computed(() => [bem('input')])  
});  

const props = defineProps({  
    modelValue: Boolean,  
    type: {  
        type: String,  
        default: 'bottom'  
    }  
});  
const { modelValue, type } = toRefs(props);  

const emits = defineEmits(['update:modelValue']);  

watch(modelValue, (newVal, oldVal) => {});  
</script>  

<style lang="scss" scoped>  
.mini-actionsheet {  
    position: fixed;  
    inset: 0;  
    background-color: rgba(0, 0, 0, 0.6);  
    &__wrap {  
        background-color: #fff;  
        height: 400rpx;  
        &--bottom {  
            position: absolute;  
            left: 0;  
            right: 0;  
            bottom: 0;  
        }  
    }  
    &__input {  
        border: 1px solid red;  
        z-index: 999;  
    }  
}  
</style>

操作步骤：

页面按钮下方输入框正常输入，点击按钮，触发弹层，在弹层中的输入框进行输入

预期结果：

弹层输入框能正常输入

实际结果：

弹层输入框能不能正常输入

bug描述：

input组件在页面中能正常输入，在自定义弹层中不能输入

更多关于uni-app 内置 Input 组件在自定义弹窗中不能输入问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 1楼

在快手小程序vue3 快手小程序平台测试了之后并未复现该问题。你在真机测试下也是同样的效果吗

更多关于uni-app 内置 Input 组件在自定义弹窗中不能输入问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

vueper 2楼

在使用 uni-app 开发时，如果在自定义弹窗中使用内置的 Input 组件时无法输入内容，可能是由于以下几个原因导致的。以下是一些常见的解决方案：

1. 层级问题

问题描述：自定义弹窗的层级可能高于 Input 组件，导致 Input 组件无法获得焦点。
解决方案：确保 Input 组件的层级高于弹窗的层级。可以通过 z-index 来调整层级。
```
.custom-dialog {
  z-index: 100;
}

.input-component {
  z-index: 101;
}
```

2. 弹窗的 `mask` 层阻止了点击事件

问题描述：弹窗的遮罩层（mask）可能阻止了 Input 组件的点击事件。
解决方案：可以通过设置 mask 层的 pointer-events 为 none 来允许点击事件穿透。
```
.mask {
  pointer-events: none;
}
```
或者，在 uni-app 中，如果你使用了 uni-popup 组件，可以通过设置 maskClick 属性为 false 来禁止遮罩层的点击事件。
```
<uni-popup :maskClick="false">
  
</uni-popup>
```

3. `Input` 组件的 `focus` 状态未正确触发

问题描述：Input 组件可能未正确获得焦点。
解决方案：可以通过手动调用 Input 组件的 focus 方法来使其获得焦点。
```
this.$refs.input.focus();
```
或者，在 uni-app 中，可以使用 uni.setKeyboardValue 方法来设置输入框的值。
```
uni.setKeyboardValue({
  value: '初始值'
});
```

4. `Input` 组件被禁用了

问题描述：Input 组件可能被禁用了。
解决方案：检查 Input 组件的 disabled 属性，确保其未被禁用。
```
<input disabled /> 
<input /> 
```

5. iOS 系统下的兼容性问题

问题描述：在 iOS 系统中，某些情况下 Input 组件可能无法正常输入。
解决方案：可以尝试在 Input 组件上添加 @input 事件监听器，并在事件处理函数中手动更新输入框的值。
```
<input @input="handleInput" />
```
```
methods: {
  handleInput(event) {
    this.inputValue = event.detail.value;
  }
}
```

6. 弹窗的 `position` 属性问题

问题描述：弹窗的 position 属性可能影响了 Input 组件的布局。

解决方案：检查弹窗的 position 属性，确保其不会影响到 Input 组件的布局。

.custom-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

7. `Input` 组件的 `placeholder` 问题

问题描述：Input 组件的 placeholder 可能遮挡了输入内容。
解决方案：确保 placeholder 不会影响到输入内容的显示。
```
<input placeholder="请输入内容" />
```

8. `Input` 组件的 `type` 属性问题

问题描述：Input 组件的 type 属性可能限制了输入内容。

解决方案：检查 Input 组件的 type 属性，确保其符合预期。

<input type="text" /> <!-- 正确示例 -->
<input type="number" /> <!-- 可能限制输入内容 -->