收藏
回答

input组件的type动态切换键盘类型在某些IOS手机上无效?

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
    })
  },
最后一次编辑于  2020-05-07
回答关注问题邀请回答
收藏

2 个回答

  • 社区技术运营专员-娇华
    社区技术运营专员-娇华
    2020-05-07

    你好,麻烦具体描述下问题流程,提供下appid,完整的复现流程

    2020-05-07
    有用
    回复 3
  • 亚设
    亚设
    2020-05-18

    我也碰到同样的问题了。。input组件动态更改type类型失效

    2020-05-18
    有用
    回复 2
    • Ryan
      Ryan
      2020-05-18
      官方一直没给具体解决方案的回复。我目前的解决方案是分别写多个不同type类型的input组件,将原来的动态更改input组件的type类型转变为动态更改不同type类型的input组件的显示与隐藏来达到目的。
      2020-05-18
      回复
    • 亚设
      亚设
      2020-05-21回复Ryan
      感谢。差点就去自个写个数字键盘了
      2020-05-21
      回复
登录 后发表内容
问题标签