uni-app 进入新页面 input自动获取焦点后 输入框内默认文字会闪一下

在 uni-app 中，当你进入一个新页面并希望 input 自动获取焦点时，可能会遇到输入框内默认文字闪烁的问题。这通常是由于页面渲染和焦点获取的时机不一致导致的。以下是一些可能的解决方案：

1. 使用 setTimeout 延迟获取焦点

你可以尝试使用 setTimeout 延迟获取焦点，以确保页面完全渲染后再进行焦点获取。

<template>
  <view>
    <input ref="input" v-model="inputValue" placeholder="请输入内容" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  mounted() {
    setTimeout(() => {
      this.$refs.input.focus();
    }, 100); // 延迟100毫秒获取焦点
  }
};
</script>

2. 使用 nextTick

nextTick 是 Vue 提供的一个方法，它会在 DOM 更新完成后执行回调函数。你可以使用 nextTick 来确保在 DOM 更新后再获取焦点。

<template>
  <view>
    <input ref="input" v-model="inputValue" placeholder="请输入内容" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.input.focus();
    });
  }
};
</script>

3. 使用 auto-focus 属性

uni-app 的 input 组件支持 auto-focus 属性，你可以直接使用这个属性来让输入框自动获取焦点。

<template>
  <view>
    <input v-model="inputValue" placeholder="请输入内容" auto-focus />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

4. 检查样式问题

有时候，默认文字的闪烁可能是由于样式问题导致的。你可以检查一下是否有样式在页面加载时影响了输入框的显示。

5. 使用 focus 事件

你可以在 input 的 focus 事件中处理默认文字的显示逻辑，以避免闪烁。

<template>
  <view>
    <input ref="input" v-model="inputValue" placeholder="请输入内容" @focus="handleFocus" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleFocus() {
      // 处理焦点获取后的逻辑
    }
  },
  mounted() {
    this.$refs.input.focus();
  }
};
</script>

6. 使用 v-if 控制输入框的显示

如果以上方法都无法解决问题，你可以尝试使用 v-if 控制输入框的显示，确保在页面完全渲染后再显示输入框。

<template>
  <view>
    <input v-if="showInput" ref="input" v-model="inputValue" placeholder="请输入内容" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      showInput: false
    };
  },
  mounted() {
    setTimeout(() => {
      this.showInput = true;
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    }, 100); // 延迟100毫秒显示输入框并获取焦点
  }
};
</script>