- input 在 iOS 上 blur 和 focus 展示
- 当前 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[代码] [代码]60[代码][代码]rpx;[代码][代码] [代码][代码]font-family[代码][代码]: PingFangSC-Regular;[代码][代码]}[代码][代码].title {[代码][代码] [代码][代码]font-family[代码][代码]: PingFangSC-Medium;[代码][代码] [代码][代码]margin[代码][代码]: [代码][代码]80[代码][代码]rpx [代码][代码]0[代码] [代码]100[代码][代码]rpx;[代码][代码]}[代码][代码]input {[代码][代码] [代码][代码]font-family[代码][代码]: PingFangSC-Medium;[代码][代码] [代码][代码]font-size[代码][代码]: [代码][代码]34[代码][代码]rpx;[代码][代码] [代码][代码]color[代码][代码]: [代码][代码]#333333[代码][代码];[代码][代码] [代码][代码]flex-grow: [代码][代码]1[代码][代码];[代码][代码] [代码][代码]padding-bottom[代码][代码]: [代码][代码]30[代码][代码]rpx;[代码][代码]}[代码][代码].close {[代码][代码] [代码][代码]margin-left[代码][代码]: [代码][代码]20[代码][代码]rpx;[代码][代码] [代码][代码]color[代码][代码]: [代码][代码]#cccccc[代码][代码];[代码][代码]}[代码][代码].input-content {[代码][代码] [代码][代码]border-bottom[代码][代码]: [代码][代码]1px[代码] [代码]solid[代码] [代码]#E8E9EB[代码][代码];[代码][代码]}[代码][代码].input-style {[代码][代码] [代码][代码]color[代码][代码]: [代码][代码]#ccc[代码][代码];[代码][代码]}[代码][代码].error-tip {[代码][代码] [代码][代码]font-size[代码][代码]: [代码][代码]24[代码][代码]rpx;[代码][代码] [代码][代码]color[代码][代码]: [代码][代码]#FF3333[代码][代码];[代码][代码] [代码][代码]line-height[代码][代码]: [代码][代码]54[代码][代码]rpx;[代码][代码]}[代码][代码].error-account {[代码][代码] [代码][代码]padding-bottom[代码][代码]: [代码][代码]38[代码][代码]rpx;[代码][代码]}[代码][代码].format-btn {[代码][代码] [代码][代码]margin-top[代码][代码]: [代码][代码]90[代码][代码]rpx;[代码][代码] [代码][代码]background[代码][代码]: [代码][代码]#00B38A[代码][代码];[代码][代码] [代码][代码]border-radius: [代码][代码]3[代码][代码]rpx;[代码][代码] [代码][代码]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: [代码][代码]''[代码][代码] [代码][代码]})[代码][代码] [代码][代码]}[代码][代码]})[代码]
2018-09-21 - 小程序如何获取某个页面的 UV
小程序如何获取某个页面的 UV???
2018-09-04 - 小程序改名???
[图片] 小程序要修改线上的名字是修改这部分吗?
2018-08-01 - 小程序修改名字???
[图片] 小程序要修改线上的名字是修改这部分吗?
2018-08-01 - 微信公众平台显示 BUG
在使用 数据分析 => 访问分析 时,发现出现了一堆不明的页面路径,确定是在小程序里面没有这些路径,求解? [图片]
2018-07-24 - 编译工具问题
[图片] 想问一下,怎么样才能不出这个弹窗呢?每次编译一次就出来,好麻烦。。。(除了不调用 wx.getUserInfo,还有其他的办法吗?)
2018-05-16 - 时间戳 BUG
明明将一个时间戳存储到页面的 data 里面,自动转成 2018-1-12 09:24 这种格式的; 在 2018/02/12 12:24 存储到 data 里面 也自动转成 2018-1-12 09:24; 我也是醉了。。。
2018-04-26 - 页面跳转会导致前一页面 JS 不能顺利执行完?
在由 index 页面数据未请求完,页面也未渲染完的情况下跳转到 detail 页面时,会导致返回到 index 页面时,页面还停留在数据未渲染完的情况下。求解
2018-03-19 - 小程序第8天还未进入审核系统,求加急审核
小程序已提交审核超过8天,还未审核通过!期间有撤回审核,是因为之前提交审核,每次一天内就过了,这次就撤回审核再提审,觉得会加快审核速度,但是还未通过。求官方加急审核,最近活动要下线。急求加速,Thank you。
2018-03-15 - textarea 不支持 opacity 属性???
如果是 Bug: textarea 不支持 opacity 属性???? [代码]<textarea< code=""></textarea<>[代码][代码][代码] [代码][代码]class=[代码][代码]"input-text"[代码][代码][代码][代码] [代码][代码]value=[代码][代码]"{{templateMes[templateMesIndex]}}"[代码][代码][代码][代码] [代码][代码]bindfocus=[代码][代码]"inputFocus"[代码][代码][代码][代码] [代码][代码]bindblur=[代码][代码]"inputBlur"[代码][代码][代码][代码] [代码][代码]name=[代码][代码]"supportMessage"[代码][代码][代码][代码] [代码][代码]bindinput=[代码][代码]"inputMessage"[代码][代码][代码][代码] [代码][代码]catchtouchmove=[代码][代码]"preventScroll"[代码][代码][代码][代码] [代码][代码]style=[代码][代码]"color: {{hiddenTextArea ? 'rgba(0,0,0,0)' : 'rgba(225,225,225,1)'}};opacity: {{hiddenTextArea ? 0 : 1}}"[代码][代码][代码][代码] [代码][代码]maxlength=[代码][代码]"50"[代码][代码]>[代码][代码][代码][代码] [代码][代码][代码][代码] 想通过 hiddenTextArea 动态改变textarea;发现在 iOS 下,在 textarea 外部包裹一层 view;然后动态改变 view 的位置时,发现收起键盘时,页面会发生抖动;在开发工具上表现堪称完美,在真机上,有种想砸手机的冲动。
2018-03-13