input组件的type根据不同类型调用不同键盘时,在某些IOS上无效,比如默认type是text,当类型改变时type切换为number,此时拉起的键盘类型还是text,而不是number。请问是如何引起的?
如下图,当前为机械备案登录时input组件的type为text,当为进出场登记时input组件的type为number,但在切换两种登录类型时,键盘类型却并没有进行 切换。分别用了两台IOS手机进行测试,一台为IOS12.4.5(前三张图,第三张图为相关环境),另一台为IOS13.3.1(后三张图,最后一张图为相关环境)。
页面代码:
<view class='ticket_container'>
<!-- 标题 -->
<view class='title'>
<view class="{{index == loginType ? 'title-sel-selected' : 'title-sel'}}" wx:for='{{loginTypeList}}' wx:key='loginType' bindtap='titleClick' data-idx='{{index}}'>{{item.name}}</view>
</view>
<!--内容-->
<view class="loginForm">
<view class='formItem'>
<input bindinput="fieldChange" value='{{username}}' data-field='username' type="{{loginType==0?'text':'number'}}" maxlength="18" placeholder="{{loginTypeList[loginType].placeholder}}" placeholder-style="color:#C8C8C8" />
</view>
<view class='formItem'>
<input password value='{{password}}' data-field='password' bindinput="fieldChange" maxlength="20" placeholder="请输入密码" placeholder-style="color:#C8C8C8" />
</view>
<view class='registerClass'>
<view></view>
<view bindtap="toRegister">注册账号</view>
</view>
<view class="commonForm">
<view class="formBtns">
<view class='form_button {{loading||!(username&&password)?"form_buttonDisabled": ""}}'>
<button bindtap="confirmLogin" loading='{{loading}}' disabled='{{loading||!(username&&password)}}'>立即登录</button>
</view>
</view>
</view>
</view>
</view>
JS代码:
data: {
loginType: 0, // 登录类型,0机械备案,1进出场登记
loginTypeList: [
{
name: '机械备案',
placeholder: '请输入统一社会信用代码/个人身份证号'
},
{
name: '进出场登记',
placeholder: '请输入工地编号'
},
], //登录类型列表
loginName: '', // 登录名
password: '', // 密码
loading: false // 请求状态
},
//用户点击tab时调用
titleClick: function (e) {
const {loginType} = this.data
const tapIndex = +e.currentTarget.dataset.idx
// 只有当前下标与点击下标不同时才清空数据
tapIndex !== loginType && this.setData({
//拿到当前索引并动态改变
loginType: tapIndex,
username: '',
password: ''
})
},
// 字段输入
fieldChange(e) {
// 获取绑定的字段名
const {
field
} = e.currentTarget.dataset
// 获取输入的值
const {
value
} = e.detail
// 如果是统一社会信用代码/个人身份证,则先把字母都转换为大写
const fieldValue = field === 'username' ? value.toUpperCase() : value
this.setData({
// 当字段值为String字符串类型时进行前后空格的去除
[field]: typeof (fieldValue) === 'string' ? fieldValue.trim() : fieldValue
})
},
我也碰到同样的问题了。。input组件动态更改type类型失效
你好,麻烦具体描述下问题流程,提供下appid,完整的复现流程
微信版本号:7.0.12
系统版本号:13.3.1
代码片段:https://developers.weixin.qq.com/s/rzDZobmu76hH