input的e.detail.value在手机预览时丢失,变为空
发布于 5 年前 作者 juanhan 20192 次浏览 来自 问答

input组件在开发者工具上一切正常,但在手机预览时,将光标放在最前面,点击删除键

e.detail.value变为空,代码如下:

//  wxml

<input bindinput=“countValChange” name=“account” placeholder=“请输入账号或绑定的手机号” />

// js

Page({
  data: {
    inputValue: ''
  },

 countValChange: function(e) {  

    // 手机预览时,将光标放在最前面,点击删除键,在vconsole上打印出的结果是空  

    console.log(e.detail.value)

    this.setData({

     inputValue: e.detail.value

   })

 } })
5 回复

我测试时也多次遇到这个问题,我测试得到的原因是:

input type是number类型,用手机键盘输入时,就会经常input的值不会跟着实际键入而改变,

input a 是普通文本输入

input b 是小键盘输入数字

input c 是普通文本输入

当填好a直接点击b进行输入后,很容易出现b的值和表现的键入值没连上

有时b键入后直接点击到c去输入文本,也很容易出现c的值和表现的键入值没连上,页面上都输入好了,而实际这个input元素根本没收到这个键入。

这种情况,很奇怪,我同一台iPhone XS的手机,有两个微信号,第一个微信号就不会出现这类问题,第二个微信号就很容易出现这类问题。神bug。

安卓上, 键盘按删除键会触发两次bindinput事件,第一次keycode为8,value为空。第二次keycode是按删除之前一次输入keycode,value是正确的值。

麻烦提供一下出现问题的机型和微信版本,并且给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们定位下问题

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

wechatide://minicode/MooIRXmp7loj

回到顶部