关于微信浏览器H5 React,Vue工程化项目input无法自动聚焦疑难杂症排查

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了关于微信浏览器H5 React,Vue工程化项目input无法自动聚焦疑难杂症排查，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含699字，纯文字阅读大概需要1分钟。

内容图文

前言

最近使用React开发微信H5搜索框自动聚焦功能，发现路由跳转页面后无法自动聚焦。尝试了各种方法均不生效…后来发型是异步加载组件问题，个人估计是微信浏览器在异步组件加载完成后导致节点失焦。

尝试过的解决方法

• input 属性 autofocus —— 不生效
• ref保存组件处罚 ref.curren.focus() —— 不生效

解决方案

完整查看了路由注册引入组件的方式，个人认为是异步加载组件的原因。尝试修改为同步引入组件。yes!成功。具体原因需深入调查，先记录以下踩坑

• 原路由注册方式 (异步，无法自动聚焦)

{
    path: "/search",
    exact: true,
    component: loadable(() => import('./pages/search')),
    title: '搜索',
 }

• 修改后路由注册方式(同步，完成聚焦)

import SearchPage from './pages/search'
{
    path: "/search?",
    exact: true,
    component: SearchPage,
    title: '搜索'
  }

内容总结

以上是互联网集市为您收集整理的关于微信浏览器H5 React,Vue工程化项目input无法自动聚焦疑难杂症排查全部内容，希望文章能够帮你解决关于微信浏览器H5 React,Vue工程化项目input无法自动聚焦疑难杂症排查所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---