项目是用wepy生成的，出现一个问题：input组件在工具上调试正常，但在手机上预览或者体验版时，将光标移到最前面，点击删除，e.detail.value变为了空，不知道什么情况。。。。
代码如下:
<template>
<view class=“container”>
<form bindsubmit=“formSubmit” bindreset=“formReset”>
<view class=“title”>请输入孩子的账号和密码 </view>
<view class=“section”>
<input bindinput=“countValChange” name=“account” placeholder=“请输入孩子的账号或绑定的手机号” />
</view>
<view class=“section”>
<input bindinput=“psdValChange” name=“password” placeholder=“请输入密码” password="{{!showPsd}}" />
<view class=“imgWrap” bindtap=“showPsd”>
<image wx:if="{{!showPsd}}" src="…/static/password1.png" />
<image wx:if="{{showPsd}}" src="…/static/password2.png" />
</view>
</view>
<view class=“btn-area” wx-if="{{isSub}}">
<button formType=“submit”>关联账号</button>
</view>
<view class=“btn-area notSub” wx-if="{{!isSub}}">
<button>关联账号</button>
</view>
</form>
</view>
</template>
<script>
import wepy from ‘wepy’
import { connect } from ‘wepy-redux’
import { SET_BIND_STATUS } from ‘…/store/types/user’
@connect({
bindStatus (state) {
return state.user.bindStatus
}
}, {
setBindStatus: SET_BIND_STATUS
})
export default class ChildInput extends wepy.page {
config = {
navigationBarTitleText: ‘关联孩子账号’
}
components = {}
data = {
showPsd: false,
count: ‘’,
psd: ‘’
}
methods = {
formSubmit (e) {
// 后台交互
console.log(‘form发生了submit事件，携带数据为：’, e.detail.value)
this._bindAccount(e.detail.value.account, e.detail.value.password)
// 弹窗
// wepy.showToast({
// title: ‘成功’,
// icon: ‘none’,
// duration: 2000
// })
},
showPsd() {
this.showPsd = !this.showPsd
},
countValChange(e) {
this.count = e.detail.value
console.log(this.count)
},
psdValChange(e) {
this.psd = e.detail.value
console.log(this.psd)
}
}
_bindAccount (account, password) {
// let that = this
wx.request({
url: `${this.$parent.globalData.baseURL}/wx/micro/parent/bindStu`,
method: ‘POST’,
header: {
‘Content-Type’: ‘application/x-www-form-urlencoded’,
‘S_T’: wx.getStorageSync(‘token’)
},
data: {
userName: account,
password: password
},
success (res) {
console.log(‘child-input.wpy --> _bindAccount --> success’)
console.log(res)
if (res.data.ret_code === 0) {
wx.showToast({
title: ‘关联成功’,
icon: ‘success’,
duration: 1400,
success () {
setTimeout(() => {
wx.navigateBack({delta: 1})
}, 1400)
}
})
} else {
wx.showToast({icon: ‘none’, title: res.data.ret_msg, duration: 1400})
}
},
fail (res) {
console.log(‘child-input.wpy --> _bindAccount --> success’)
console.log(res)
wx.showToast({icon: ‘none’, title: ‘关联孩子失败’, duration: 1400})
}
})
}
computed = {
isSub() {
if (this.count && this.psd) {
return true
} else {
return false
}
}
}
onLoad() {}
}
</script>
<style lang=“less”>
.container{
width: 690rpx;
margin: 0 auto;
form{
width: 100%;
height: auto;
}
.title{
margin: 30rpx 0;
font-size: 40rpx;
font-weight: 900;
padding: 0;
}
.section{
height: 90rpx;
width: 100%;
border-bottom: 1rpx solid #cccccc;
margin-top: 20rpx;
position: relative;
input{
height: 100%;
line-height: 90rpx;
}
.imgWrap{
width: 48rpx;
height: 48rpx;
display: black;
padding: 15rpx;
position: absolute;
top: 0;
right: 15rpx;
z-index: 99;
image{
width: 48rpx;
height: 48rpx;
}
}
}
.btn-area{
margin-top: 50rpx;
button{
color: #ffffff;
background: #007AFF;
}
}
.notSub button{
background: #cccccc;
color: #999999;
}
}
</style>
强力驱动