微信小程序使用i-view组件库的i-input无法触发bind:change事件的搞笑“bug”

注意：本篇文章不含技术方面的内容，只是感慨一下，如果你有类似的情况，或者想感受一下搞笑的bug，可以继续看一看，如果你想学习技术，本篇文章大概不会为你提供什么教学帮助。

我在做微信小程序的时候遇到过一个搞笑的“bug”。加上个引号意思是这个东西本身并不是代码的问题，但是看上去确确实实就像是前端的一个代码错误一样，当时找了好久想了好多办法没解决，当问题真正被解决时又哭笑不得想骂娘，在此记录并分享一下。

报错：用户明明已经输入了账户和密码，但是登录的时候依然要求用户输入账户或者密码。

（仅仅是极个别的安卓机型会有这个问题，绝大多数的用户都是正常的，感觉一百个人里只有一两个才会出现这个问题，用户微信版本也是最新版，安卓版本也足够高）

代码其实很简单了

<i-input title="用户名" placeholder="请输入用户名" value="{{userName}}" bind:change="userNameChange"></i-input>

userNameChange(e){this.setData({'userName':e.detail.detail.value.trim()})
}

点击登录的时候使用 !userName 的方式去校验。

代码看上去是绝对没问题的（实际上它就是没问题的），但是有的用户就是输完了账户密码登陆时死活过不去校验。当时降低了调试基础库，重写代码，都不行。而且在测试的时候我们这边起码四五个手机都复现不出来这个问题。

直到我拿到了用户的手机并上手测了一下，我人傻了。输入了账户密码之后确实是弹出了报错的提醒。

然后我账户密码各自输了一个1，校验却又神奇的通过了……

此时我发现了一个微小的细节，就是用户在输入账户的时候（纯英文字母的账户），输入的文本下面出现了下划线……

然后我意识到，用户这是输入法开启了英文单词的智能拼写功能，类似于这样（只是我这个没有下划线而已）：

然后用户并没有点击上面的第一个备选项bana，而是点击了屏幕上方的空白区域，把输入法关掉了。此时输入框里的内容确实是bana，下划线也消失了，跟正常输入一模一样，然后，change事件没有被触发……

也就是说此时用户是不经意间通过输入法上的智能拼写，卡了组件一个bug，让组件的输入框出现了文本但是却没触发change事件，此时userName这个变量它还是一个空字符串。

当我把智能拼写关闭了以后，或者通过点击的方式确认我的输入，change事件触发了，之后一切正常……

之后我就一直在琢磨这个事情，我用自己的手机无论是用拼音输入法输英文，还是智能拼写，无论是点击备选项还是点击空白区域，都能正常的触发change事件，我估计绝大多数人的输入法都是这种。

但是真的存在个别机型的个别输入法，在上面的操作之后不会触发组件的change事件。

非常奇葩，又无可奈何。

至于用户的手机型号和输入法是什么软件，我正在问，我只记得手机屏幕挺大的……

哦……刚刚问到了，华为p30pro，系统自带输入法，应该是百度输入法。有p30pro的朋友可以自己去试一试。

被输入法秀的头晕的一天

微信小程序使用i-view组件库的i-input无法触发bind:change事件的搞笑“bug”相关推荐

微信小程序导入Vant Weapp组件库
超详细!微信小程序导入Vant Weapp组件库 Vant Wepp组件库轻量.可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式. Vant Weapp组件库官方文 ...
微信小程序中使用vant组件库（超详细）
目录前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
五分钟学会在微信小程序中使用 vantUI 组件库
前言我们在开发微信小程序时,设计和实现好用的用户界面无疑是至关重要的一步.但是微信小程序官方自带的 UI 组件库无法满足很多使用场景,这个时候就需要我们使用一些第三方的 UI 组件库.而 vant ...
微信小程序前端引入weui组件库
正在开发的微信小程序,想使用weui组件库. 步骤如下: 基础:1.小程序开发工具:1.06.22 1. 初始化以管理员身份运行命令行窗口(cmd)或使用VSCode进入终端,在cmd中进入项目的 ...
微信小程序动态添加view组件
在web中,我们动态添加DOM,可以用jQuery的方法,很简单.在微信小程序中怎么实现下面这么需求. 其中,里程数代表上一行到这一行地方的距离(这个不重要):要实现的就是点击增加途径地,就多一行,删 ...
微信小程序，引入WeUI组件库扩展组件库
小程序扩展组件库 | 微信开放文档微信官方文档给了两种weui引入方式: 通过 useExtendedLib 扩展库的方式引入,这种方式引入的组件将不会计入代码包大小. 可以通过npm方式下载构建 ...
微信小程序中引用vant组件库
步骤 1.vant组件库里面也有说明,它说package.json 和 node_modulles 必须在miniprogram目录下,可是一般你刚新建一个小程序项目的时候,是没有package.js ...
vant weapp 多选上传图片_微信小程序使用Vant Weapp组件库的方法步骤
地址:https://youzan.github.io/vant/#/zh-CN/intro 一.引入Vant组件库 1.首先运行 npm init 就会生成 package.json 2.运行 np ...
微信小程序使用vant ui 组件库安装步骤
第1步:初始化npm npm init 然后一直回车,直到 package.json出现第2步:安装vant npm install @vant/weapp -S --production 第3步: ...

微信小程序使用i-view组件库的i-input无法触发bind:change事件的搞笑“bug”

微信小程序使用i-view组件库的i-input无法触发bind:change事件的搞笑“bug”相关推荐

最新文章

热门文章