项目是用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>
差不多也遇到这个问题,只是我是手机端用input调起键盘时,多按几次删除,光标就莫名跑到中间,删完中间的字,e.detail.value就为空了,因为我的input是隐藏的,导致后面有值也删不掉了
我也遇到了这问题。光标在输入框的文字中间开始删除, 输入框 前面的文字删除完, 输入框 后面还有文字。console.log 为空。请问楼主是怎么解决的?
我觉得这是官方的bug,其实提交表单的时候值还能获取到,我之前是先在提交之前去做一些验证,现在改成在点击按钮提交的时候在验证
试了官方提供的例子,也会有这个问题,看来是有一个bug
这问题说了好久了 还没解决