公告列表
公告列表
收藏
回答

input 在 iOS 上 blur 和 focus 展示

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug input 客户端 6.7.2 最新

- 当前 Bug 的表现（可附上截图）


- 预期表现


现在要实现情况是： 实现表单的校验时：输入邮箱和密码，在两个 input blur 时会校验输入是否合法，如果不合法则提示红字内容；input focus 时则对对应的提示内容进行隐藏（图中白字为 placehold）


在 iOS 上的表现是：在第一个 input 提示错误的时候，在对第二个 input 进行 focus 的时候，发现 第二个 input 出现在“请输入有效的账号”下面

- 提供一个最简复现 Demo


<form report-submit bindsubmit="pageSubmit">
  <view class="content">
    <view class="title fs_38 dark">绑定账号</view>
    <view class="input-content flex a_center space_between">
      <input name="account" class="username" focus placeholder="请输入已验证的邮箱/手机" placeholder-class="input-style fs_34" bindinput="emailInput" bindfocus="emailFocus" bindblur="emailBlur" value="{{hasAccount}}" />
      <span class="lg-wx-mina-input-del close fs_38" wx:if="{{hasAccount}}" bindtap="clearAccount"></span>
    </view>
    <view hidden="{{!emailTip}}" class="error-tip error-account">请输入有效的帐号</view>
 
    <view class="input-content flex a_center space_between">
      <input name="password" class="password" password="{{true}}" placeholder="请输入密码" placeholder-class="input-style fs_34" bindinput="passportInput" bindblur="passportBlur" bindfocus="passportFocus" value="{{hasPassport}}"/>
      <span class="lg-wx-mina-input-del close fs_38" wx:if="{{hasPassport}}" bindtap="clearPassport"></span>
    </view>
    <view hidden="{{!passportTip}}" class="error-tip">请输入6~16位密码，字母区分大小写</view>
    <button form-type="submit" class="format-btn {{canSubmit ? '' : 'invalid-btn'}}" data-event="CLICK_BIND">绑定</button>
  </view>
</form>
.content {
  padding: 0 60rpx;
  font-family: PingFangSC-Regular;
}
.title {
  font-family: PingFangSC-Medium;
  margin: 80rpx 0 100rpx;
}
input {
  font-family: PingFangSC-Medium;
  font-size: 34rpx;
  color: #333333;
  flex-grow: 1;
  padding-bottom: 30rpx;
}
.close {
  margin-left: 20rpx;
  color: #cccccc;
}
.input-content {
  border-bottom: 1px solid #E8E9EB;
}
.input-style {
  color: #ccc;
}
.error-tip {
  font-size: 24rpx;
  color: #FF3333;
  line-height: 54rpx;
}
.error-account {
  padding-bottom: 38rpx;
}
.format-btn {
  margin-top: 90rpx;
  background: #00B38A;
  border-radius: 3rpx;
  color: #fff;
}
.invalid-btn {
  opacity: 0.3;
}
Page({
  data: {
    canSubmit: false,
    passportValid: false
  },
  emailFocus(){
    this.data.emailTip && this.setData({
      emailTip: false
    })
  },
  emailBlur(e){
    let emailValid = util.validateAccount(e.detail.value); // 校验规则自己加下 哇哇哇 注意这里里里里里里里里里里里里里里
    if(!emailValid){
    }
    this.setData({
      emailTip: !emailValid,
      emailValid
    })
  },
  emailInput(e){
    let emailValid = util.validateAccount(e.detail.value); // 校验规则自己加下 哇哇哇 注意这里里里里里里里里里里里里里里
    this.setData({
      hasAccount: e.detail.value,
      canSubmit: (emailValid && this.data.passportValid)
    })
  },
  passportFocus(){
    console.log("passportFocus");
    this.data.passportTip && this.setData({
      passportTip: false
    })
  },
  passportBlur(e){
    let passportValid = /^[\S\s]{6,16}$/.test(e.detail.value);
 
    this.setData({
      passportTip: !passportValid,
      passportValid,
      canSubmit: (passportValid && this.data.emailValid)
    })
  },
  passportInput(e){
    let passportValid = /^[\S\s]{6,16}$/.test(e.detail.value);
    this.setData({
      hasPassport: e.detail.value,
      canSubmit: (passportValid && this.data.emailValid)
    })
  },
  clearAccount(){
    this.setData({
      hasAccount: ''
    })
  },
  clearPassport(){
    this.setData({
      hasPassport: ''
    })
  }
})


回答关注问题邀请回答
收藏

1 个回答

请 登录 后发表内容
相关文档