收藏
回答

小程序input组件问题

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug input 客户端 6.7.0 6.7.1321

项目是用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>



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

3 个回答

  • 沫笺
    沫笺
    2018-08-14

    差不多也遇到这个问题,只是我是手机端用input调起键盘时,多按几次删除,光标就莫名跑到中间,删完中间的字,e.detail.value就为空了,因为我的input是隐藏的,导致后面有值也删不掉了

    2018-08-14
    有用
    回复
  • Guo-jw
    Guo-jw
    2018-07-17

    我也遇到了这问题。光标在输入框的文字中间开始删除, 输入框 前面的文字删除完, 输入框 后面还有文字。console.log 为空。请问楼主是怎么解决的?

    2018-07-17
    有用
    回复 1
    • 川味超人
      川味超人
      2018-07-17

      我觉得这是官方的bug,其实提交表单的时候值还能获取到,我之前是先在提交之前去做一些验证,现在改成在点击按钮提交的时候在验证

      2018-07-17
      回复
  • 川味超人
    川味超人
    2018-07-14

    试了官方提供的例子,也会有这个问题,看来是有一个bug

    2018-07-14
    有用
    回复 1
    • y
      y
      2018-07-20

      这问题说了好久了  还没解决

      2018-07-20
      回复
登录 后发表内容