uni-app 特定手机安卓5或7 input组件无法自动聚焦甚至无法点击

uni-app 特定手机安卓5或7 input组件无法自动聚焦甚至无法点击

开发环境 版本号 项目创建方式
Windows 22000.434 HBuilderX

操作步骤：

在我说的环境下，直接运行uniapp的官方示例，也会重现BUG。只要文件是nvue+vue3（要没记错vue2也有BUG）。这个问题，不仅仅在alpha版本上有，在正式版3.3.13上也有。

预期结果：

在夜神模拟器下，能正常点击input组件，并输入文字。自动聚焦功能也好用。

实际结果：

点击后自动失去焦点。就好像有个机器人把我鼠标移走了！！！无法自动聚焦，无法输入文字。如果一边高速点击，一边狂按键盘，是可以在自动焦点失去之前输入1个或2个字母的。

bug描述：

夜神模拟器默认是安卓5.1.1，但是我创建了新的夜神模拟器安卓版本7.1.2，也不好使。可能问题只在夜神模拟器上出现。或者在特定手机上出现。因此问题还是要反馈一下的。主要的问题就是，在使用nvue+vue3+vuex的情况下，使用uniapp官方组件input，会发现：

  1. 自动聚焦功能不好使。
  2. 鼠标点击input窗口发现点击不动（不能连续输入文字）。
  3. 鼠标点击聚焦后，自动失去焦点（而且通过失去焦点事件返回事件，发现是自动执行失去焦点，每次都有返回值）。

具体代码如下： 只需要在nvue+vue3+vuex的情况下，index.nvue里使用如下input代码即可，submit直接return event。Value可以使用vuex的state数值。 如果将文件修改为index.vue，则input组件就是正常的。

<input [@confirm](/user/confirm)="submit" v-model="Value" style="overflow: hidden;width: 306rpx;" :placeholder="Value" focus="true" confirm-type="search" adjust-position="false" />

更多关于uni-app 特定手机安卓5或7 input组件无法自动聚焦甚至无法点击的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

怎么样，有确定BUG吗？ 主要是不知道这种问题，仅仅是模拟器里不好使，还是说某些特定型号手机里也不好使。 还请帮忙看一下，确认一下问题。

更多关于uni-app 特定手机安卓5或7 input组件无法自动聚焦甚至无法点击的实战教程也可以访问 https://www.itying.com/category-93-b0.html


demo给一下?

楼上，请仔细阅读。内容已描述非常详细。 请工作人员在闲暇之余，抓紧确认一下。

也就是说 夜神模拟器 安卓7版本能复现是吧

实体机 测过没? 我搞下看看

@DCloud_Android_ST 请确认一下。谢谢。

在 uni-app 开发中，如果在某些特定的 Android 5 或 Android 7 设备上，input 组件无法自动聚焦甚至无法点击，这可能是由于以下几个原因导致的：

1. 兼容性问题

Android 5 和 Android 7 是比较旧的系统版本，可能存在一些兼容性问题。特别是某些低端设备或定制 ROM 的设备，可能会对 WebView 或原生组件的支持不够完善。

2. WebView 版本问题

Android 5 和 Android 7 的 WebView 版本较旧，可能不支持某些现代的前端特性，导致 input 组件无法正常聚焦或点击。

3. CSS 或布局问题

某些 CSS 样式或布局可能会导致 input 组件无法正常接收点击事件。例如，z-index 设置不当、position 属性问题等。

4. 事件冲突

可能存在事件冲突，例如父元素的 touch 事件或 click 事件阻止了 input 组件的正常聚焦。

5. 原生组件渲染问题

在 uni-app 中，某些情况下 input 组件可能会被渲染为原生组件，而在某些设备上，原生组件的表现可能与预期不一致。

解决方案

1. 手动触发聚焦

如果自动聚焦无法生效，可以尝试手动触发聚焦。例如，在 mounted 或 onReady 生命周期中调用 focus 方法：

this.$nextTick(() => {
  this.$refs.input.focus();
});

2. 检查 CSS 和布局

确保 input 组件的 CSS 样式和布局没有影响到其点击和聚焦。可以尝试移除一些复杂的样式，看看问题是否依然存在。

3. 使用原生组件

如果问题依然存在，可以尝试使用 uni-app 的原生组件，例如 input 组件的 native 模式：

<input type="text" placeholder="请输入内容" native />

4. 升级 WebView

如果可能，建议用户升级设备的 WebView 版本。可以通过 Google Play 商店更新 WebView。

5. 降级处理

对于一些无法解决的兼容性问题，可以考虑对 Android 5 和 Android 7 设备进行降级处理，例如简化功能或提供替代方案。

6. 使用 focus 事件

如果点击无效，可以尝试通过其他事件（如 focus 事件）来触发 input 组件的聚焦：

<input type="text" placeholder="请输入内容" [@focus](/user/focus)="handleFocus" />

methods: {
  handleFocus() {
    this.$refs.input.focus();
  }
}
回到顶部