您好,欢迎来到步遥情感网。
搜索
您的当前位置:首页uniapp picker+input日期选择器 禁止弹出软键盘兼容问题

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

来源:步遥情感网

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>

结果:符合需求。

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- obuygou.com 版权所有 赣ICP备2024042798号-5

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务