微信小程序input异常聚焦

 Word-input" name="getCode" value="{{code}}" placeholder="请输入测试码" placeholder-class="phcolor" bindinput="editCode"focus="focus" bindfocus="listenFocus" bindblur="listenBlur">确定取消

如上图所示，在小程序弹窗内第一行有Input和2个按钮。

异常是在真机上点击取消按钮隐藏弹窗时，input会异常聚焦，页面显示异常，会显示为Input框内值，并自动拉起小键盘。在真机点击小键盘任意键或者隐藏小键盘可消除残影。

 尝试当惦记取消按钮时，设置input的focus为false，并监听input的聚焦和失焦事件，真机异常仍然存在。

  changeShowTestCodePop: function () {    var that = this;    var showTestCodePop = that.data.showTestCodePop;    that.setData({      showTestCodePop: !showTestCodePop,      focus: false    })  },  listenFocus: function () {    console.log("我聚焦了~~");  },  listenBlur: function () {    console.log("我失焦了~~");  },

 尝试把取消按钮事件绑定在购买文本上，真机无异常，怀疑是离Input太近了影响的。设置了input和取消按钮的相对定位，并且取消按钮层级更高。异常还在。

确定取消

最后把文本按钮的标签改成了，异常消失，问题解决。原理还不清楚，有懂的大佬路过麻烦讲解下，感谢~

来源地址：https://blog.csdn.net/jpjp2020/article/details/130281362