写了个登录界面,电脑上没问题,真机调试的时候必须要按两次提交按钮才能把信息提交上去,consol.log一看提交的信息,发现第一次根本就没提交上去,我猜第一次大概是因为要隐藏键盘,第二次才是真正的提交,用户体验极差。。怎么解决啊
代码片段如下:
wxml:
<form bindsubmit='onSubmit'>
<view class="section-container">
<image class='image' src='/images/others/account.png'></image>
<input class="common-input" name="phoneNumber" maxlength='11' type="text" placeholder="请输入账号/手机号"></input>
</view>
<view class="section-container">
<image class='image' src='/images/others/password.png'></image>
<input class="common-input" name="password" type="password" placeholder="请输入密码"></input>
</view>
<view class="btn-area">
<button class="btn" form-type='submit' style="background:#3775F6; color:white" bindtap="login">登录</button>
</view>
</form>
js:
Page({
data: {
},
onSubmit:function(event){
var value = event.detail.value;
var phoneNumber = value.phoneNumber;
var password = value.password;
this.setData({
phoneNumber: phoneNumber,
password: password
})
},
login:function(event) {
wx.clearStorageSync();
var that=this;
var phoneNumber = that.data.phoneNumber;
var password = that.data.password;
var checkPhone = /^1(3|4|5|7|8)\d{9}$/;
console.log(phoneNumber);
if (!(checkPhone.test(phoneNumber))) {
wx.showToast({
title: '手机号错误!',
duration: 2000,
image: '/images/others/wrong.png'
})
return false;
}
}
})
同问
input 失焦触发提交(我也遇到楼主的问题了,上网百度一圈都在说问题,而没有解决方法,我也是想了好一会才想到这个方法的🙃)