微信小程序input异常聚焦

最新推荐文章于 2024-08-27 20:56:01 发布

楚念悠

最新推荐文章于 2024-08-27 20:56:01 发布

阅读量2.1k

点赞数 1

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/jpjp2020/article/details/130281362

版权

文章描述了一个在微信小程序中，点击取消按钮时Input输入框异常聚焦的问题，表现为即使弹窗隐藏，Input仍保持聚焦状态，显示输入值并自动弹出小键盘。作者尝试了设置focus为false、监听聚焦和失焦事件以及改变布局和层级，但问题依然存在。最终，通过将取消按钮由text标签改为button标签解决了问题。

摘要由CSDN通过智能技术生成

 <input type="text" class="password-input" name="getCode" value="{{code}}" placeholder="请输入测试码" placeholder-class="phcolor" bindinput="editCode"	focus="focus" bindfocus="listenFocus" bindblur="listenBlur"></input>
<text class="start-btn" bindtap="submitTestCode">确定</text>
<text class="cancel-btn" bindtap="changeShowTestCodePop">取消</text>

如上图所示，在小程序弹窗内第一行有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和取消按钮的相对定位，并且取消按钮层级更高。异常还在。

<input type="text" class="password-input" name="getCode" value="{{code}}" placeholder="请输入测试码" placeholder-class="phcolor" bindinput="editCode"></input>
<button class="start-btn" bindtap="submitTestCode">确定</button>
<button class="cancel-btn" bindtap="changeShowTestCodePop">取消</button>

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