微信小程序input异常聚焦-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序input异常聚焦。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序input获取焦点,微信小程序,小程序

 <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获取焦点,微信小程序,小程序

尝试当惦记取消按钮时，设置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和取消按钮的相对定位，并且取消按钮层级更高。异常还在。

<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>，异常消失，问题解决。原理还不清楚，有懂的大佬路过麻烦讲解下，感谢~文章来源地址https://www.toymoban.com/news/detail-726318.html

到了这里，关于微信小程序input异常聚焦的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！