最近，线上的一个 App 收到用户反馈，输入框禁用状态下点击无法拉起模态框。找了一下身边可用机型进行了测试，起初所有机型都没有复现这个问题，突然有一天 Redmi K30S Ultra 出现了异常，点击输入框无法触发点击事件，只有输入框右侧的图标可以触发点击事件。

接着看了一下 uview 的源码，u-input 组件在 input 组件外套了盒子，外面的盒子确实绑定了 click 事件，我们处理的实际上是 u-input 组件的点击事件而不是 input 组件的点击事件。

<template>
	<view
		class="u-input"
		:class="{
			'u-input--border': border,
			'u-input--error': validateState
		}"
		:style="{
			padding: `0 ${border ? 20 : 0}rpx`,
			borderColor: borderColor,
			textAlign: inputAlign
		}"
		@tap.stop="inputClick"
	>
		……
		<view class="u-input__right-icon u-flex">
			<view class="u-input__right-icon__clear u-input__right-icon__item" @tap="onClear" v-if="clearable && value != '' && focused">
				<u-icon size="32" name="close-circle-fill" color="#c0c4cc"/>
			</view>
			<view class="u-input__right-icon__clear u-input__right-icon__item" v-if="passwordIcon && type == 'password'">
				<u-icon size="32" :name="!showPassword ? 'eye' : 'eye-fill'" color="#c0c4cc" @click="showPassword = !showPassword"/>
			</view>
			<view class="u-input__right-icon--select u-input__right-icon__item" v-if="type == 'select'" :class="{
				'u-input__right-icon--select--reverse': selectOpen
			}">
				<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'u-input',
	……
	methods: {
		……
		inputClick() {
			this.$emit('click');
		}
	}
};
</script>

最终定位到问题是 u-input 的 click 事件在内部的 input 组件禁用时，无法正常触发。目前，只是在部分 Android 机型上有这个问题。

所以，在处理类似的交互时可以选择如下方案进行修改：

• 在禁用状态下，在 u-input 组件右侧添加 icon ，通过 icon 的点击事件拉起模态框
• 在 u-input 组件顶部添加一个盒子，触发盒子的点击事件拉起模态框

注：input 组件是 uniapp 提供的内置表单组件，是没有点击事件的