Vue.js 实现光标始终保持聚焦在输入框的解决方案

Vue.js 实现光标始终保持聚焦在输入框的解决方案

引用

CSDN

1.

https://blog.csdn.net/to_prototy/article/details/144452306

在日常开发中，我们经常会遇到一些特殊的需求，比如需要让光标始终保持在某个输入框中。例如，在处理扫码枪输入的场景中，为了确保用户体验和防止用户错误操作，我们需要实现无论用户进行何种操作，光标始终定位在输入框的功能。

解决方案思路

首先想到的是使用input元素的focus属性，但实际测试发现，如果用户进行了其他操作，光标就会从输入框中失去焦点。经过思考，最终决定通过监听用户的click事件来实现这一需求。

代码实现

以下是具体的Vue.js代码实现：

<template>
  <div style="width: 500px; padding: 50px;">
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
      <el-form-item label="载体编号">
        <el-input v-model="ruleForm.ztCode" ref="myInput">
          <el-button slot="append" type="primary" size="mini">录入</el-button>
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        ztCode: ''
      }
    }
  },
  beforeDestroy() {
    document.removeEventListener('click', this.preventBlur)
  },
  mounted() {
    this.$refs.myInput.focus()
    document.addEventListener('click', this.preventBlur)
  },
  methods: {
    preventBlur(event) {
      const element = this.$refs.myInput.$el
      if (!element.contains(event.target)) {
        this.$refs.myInput.focus()
      }
    }
  }
}
</script>

代码解析

1. 在模板中定义了一个输入框，并为其添加了ref属性，方便在脚本中引用。
2. 在组件挂载时（mounted生命周期），将焦点设置到输入框，并添加全局的click事件监听器。
3. 在组件销毁前（beforeDestroy生命周期），移除全局的click事件监听器，避免内存泄漏。
4. 在preventBlur方法中，检查点击事件的目标是否在输入框范围内，如果不是，则重新将焦点设置到输入框。

通过上述实现，可以确保在任何情况下，光标都始终保持在输入框中，从而提升用户体验并防止用户错误操作。