uniapp picker+input日期选择器禁止弹出软键盘兼容问题

uniapp picker+input 日期弹出软键盘问题

_阿秀_

1609人浏览 · 2024-03-07 11:29:41

_阿秀_ · 2024-03-07 11:29:41 发布

1. 官网给的picker 日期选择示例

<view class="uni-list-cell">
	<view class="uni-list-cell-left">当前选择</view>
	<view class="uni-list-cell-db">
		<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
			<view class="uni-input">{{date}}</view>
		</picker>
	</view>
</view>

2. 在picker里面使用input

<view class="uni-list-cell">
	<view class="uni-list-cell-left">当前选择</view>
	<view class="uni-list-cell-db">
		<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<input :value="dateValue" placeholder="年-月-日" />
		</picker>
	</view>
</view>

结果：弹出日期选择器的同时弹出输入框且可改值。

3. 使用disable禁用输入框

<view class="uni-list-cell">
	<view class="uni-list-cell-left">当前选择</view>
	<view class="uni-list-cell-db">
		<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<input :value="dateValue" disabled placeholder="年-月-日" />
		</picker>
	</view>
</view>

结果：有些设备（如小米、网页调试）无法弹出日期选择器。
原因：input被禁用无法点击。

4. 使用定位盒子覆盖input框，添加可点击条件

<view class="uni-list-cell">
	<view class="uni-list-cell-left">当前选择</view>
	<view class="uni-list-cell-db">
		<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<view style="position: relative;">
					<input :value="dateValue" disabled placeholder="年-月-日" />
					<view style="position: absolute; top: 0;bottom: 0;left: 0;right: 0;"> </view>
				</view>
		</picker>
	</view>
</view>