uni-app 【NVUE】多个input框输入确认后自动聚焦 光标问题以及偶发聚焦问题

在使用 uni-app 的 NVUE 开发时，处理多个 input 框的自动聚焦和光标问题可能会遇到一些挑战，尤其是偶发的聚焦问题。以下是一些常见的解决方案和注意事项：

1. 自动聚焦问题

在 NVUE 中，input 组件的自动聚焦可以通过 focus 属性来实现。但是，由于 NVUE 的渲染机制和原生组件的限制，可能会出现聚焦不成功的情况。

解决方案：

• 使用 nextTick：在确认输入后，使用 uni.nextTick 来确保 DOM 更新完成后再进行聚焦操作。

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

• 手动触发聚焦：在某些情况下，可能需要手动触发聚焦事件，例如通过 setTimeout 延迟聚焦。

  setTimeout(() => {
    this.$refs.input2.focus();
  }, 100);
  

2. 光标问题

在 NVUE 中，input 组件的光标可能会因为聚焦顺序或渲染问题而出现异常，例如光标位置不正确或光标闪烁。

解决方案：

• 确保 input 组件正确渲染：在聚焦之前，确保 input 组件已经正确渲染到页面上。可以通过 v-if 或 v-show 来控制 input 的显示。

  <input v-if="showInput" ref="input2" />
  

• 设置 cursor 属性：在某些情况下，可以通过设置 cursor 属性来控制光标的位置。

  this.$refs.input2.setSelectionRange(position, position);
  

3. 偶发聚焦问题

偶发的聚焦问题可能是由于 NVUE 的渲染机制或事件处理顺序导致的。以下是一些可能的解决方案：

解决方案：

• 避免频繁的 DOM 操作：频繁的 DOM 操作可能会导致聚焦问题，尽量减少不必要的 DOM 更新。

• 使用 focus 事件：在 input 组件的 focus 事件中处理聚焦逻辑，确保聚焦操作在正确的时间执行。

  <input [@focus](/user/focus)="handleFocus" />
  

  methods: {
    handleFocus() {
      // 处理聚焦逻辑
    }
  }
  

• 检查事件冒泡：确保没有其他事件阻止了 input 组件的聚焦操作。

4. 综合示例

以下是一个综合示例，展示了如何在多个 input 框之间实现自动聚焦，并处理光标和偶发聚焦问题：

<template>
  <view>
    <input ref="input1" v-model="value1" @confirm="focusInput2" />
    <input ref="input2" v-model="value2" v-if="showInput2" [@focus](/user/focus)="handleFocus" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      value1: '',
      value2: '',
      showInput2: false
    };
  },
  methods: {
    focusInput2() {
      this.showInput2 = true;
      uni.nextTick(() => {
        this.$refs.input2.focus();
      });
    },
    handleFocus() {
      // 处理聚焦逻辑
    }
  }
};
</script>