H5使用 input 输入框使用 v-model或 value 时在苹果浏览器会出现快速打字失去光标的BUG

H5使用 input 输入框使用 v-model或 value 时在苹果浏览器会出现快速打字失去光标的BUG

| 开发环境 | 版本号 | 项目创建方式 |
|----------|--------|--------------|
| Windows  | 11     | HBuilderX    |

### 示例代码：
```html
<input  v-model="changeValue"    />

操作步骤：

新建一个最简单的应用，直接使用input的v-model绑定即可，然后启动之后在苹果手机中使用，快速输入后会出现失去光标。

预期结果：

在苹果手机中使用，快速输入后会不失去光标。

实际结果：

无

bug描述：

H5使用 input 输入框使用 v-model或 value 时在苹果浏览器会出现快速打字失去光标。


1 回复

这是一个iOS Safari浏览器中常见的输入框光标问题。建议尝试以下解决方案：

  1. 使用@input事件替代v-model：
<input :value="changeValue" @input="changeValue = $event.target.value" />
  1. 或者添加@blur事件强制重新聚焦：
<input v-model="changeValue" @blur="handleBlur" ref="inputRef" />

methods: {
  handleBlur() {
    this.$nextTick(() => {
      this.$refs.inputRef.focus()
    })
  }
}
  1. 也可以尝试设置autocapitalize="off"属性：
<input v-model="changeValue" autocapitalize="off" />
回到顶部