如何在 Vue3 中实现表单变量自动聚焦替换

在前端开发中，有时我们需要在输入框中动态替换一些占位符（比如 {name} 这种变量），并且让用户依次输入变量内容。今天我就分享一个在 Vue3 中实现这一需求的简单方法，用户可以通过按下 Enter 键，光标自动跳转到下一个变量并替换，直到完成所有变量输入。

实现需求

用户从下拉框中选择一段包含大括号变量的文本。

对应的文本显示在输入框中，并依次选中大括号内的变量。

用户输入时，大括号内的变量被替换掉。

按下回车键后，光标跳转到下一个变量。

所有变量输入完成后，光标移动到文本末尾并提示“输入完成”。

实现步骤

1. 初始化 Vue 项目

如果你还没有初始化 Vue 项目，可以通过以下命令快速创建一个 Vue3 项目：

复制代码
npm init vue@latest
cd your-project
npm install
npm run dev

2. 设计核心逻辑

我们通过 Vue 的 v-model 和 ref 实现对输入框的控制，使用正则表达式提取大括号内的变量，并借助 setSelectionRange 实现对变量的选中与替换。

3. 核心代码

以下是完整的 Vue3 实现代码：

复制代码
<template>
  <div>
    <!-- 文本选择器 -->
    <div>
      <label for="textSelect">选择一段文本:</label>
      <select id="textSelect" v-model="selectedText" @change="handleTextSelect">
        <option value="">-- 选择 --</option>
        <option v-for="(text, index) in texts" :key="index" :value="text">
          {{ text }}
        </option>
      </select>
    </div>

    <!-- 输入框 -->
    <div v-if="inputValue">
      <input
        ref="inputFieldRef"
        v-model="inputValue"
        @keydown.enter.prevent="handleEnter"
      />
    </div>

    <!-- 成功提示 -->
    <div v-if="successMessage" class="success">
      {{ successMessage }}
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';

const texts = ref([
  'Hello, {name}, welcome to {place}!',
  'Goodbye, {name}, see you at {event}.',
  '{person} is going to {location} tomorrow.'
]);

const selectedText = ref(''); // 用户选择的文本
const inputValue = ref('');   // 输入框中的文本
const successMessage = ref(''); // 成功提示
const inputFieldRef = ref(null); // 引用输入框

// 当选择文本时，处理文本并提取变量
const handleTextSelect = () => {
  if (selectedText.value) {
    inputValue.value = selectedText.value; // 将选中的文本设置为输入框的值
    nextTick(focusNextVariable); // 等待DOM更新后聚焦到变量
  }
};

// 聚焦并选中变量
const focusNextVariable = () => {
  const inputField = inputFieldRef.value;
  inputField.focus(); // 聚焦到输入框
  focusVariable(); // 选中下一个变量
};

// 选中大括号中的变量
const focusVariable = () => {
  const input = inputValue.value;
  const match = input.match(/{\w+}/);

  if (match) {
    const start = match.index;
    const end = start + match[0].length;
    inputFieldRef.value.setSelectionRange(start, end); // 选中变量
  } else {
    // 如果没有变量了，将光标移动到末尾
    const inputField = inputFieldRef.value;
    const inputLength = inputField.value.length;
    inputField.setSelectionRange(inputLength, inputLength); // 移动光标到末尾
    successMessage.value = "所有变量已成功输入！";
  }
};

// 处理回车键按下事件
const handleEnter = () => {
  focusVariable(); // 简化后的逻辑，直接选中下一个变量或将光标移动到末尾
};
</script>

<style scoped>
.success {
  color: green;
  margin-top: 10px;
}
input {
  width: 100%;
  font-size: 16px;
  padding: 8px;
  margin-top: 10px;
}
</style>

4. 代码解析

变量选中与替换：使用正则表达式 /{\w+}/ 来匹配大括号内的变量，并通过 setSelectionRange 将这些变量选中，等待用户输入。

自动光标跳转：当用户输入完成并按下回车键时，代码会自动聚焦到下一个变量，如果没有更多变量，则将光标移动到文本末尾。

用户提示：当所有变量输入完毕后，会显示一个提示 “所有变量已成功输入！”，并终止变量替换流程。

5. 效果预览

在实现完上述逻辑后，你的输入框将具备自动聚焦并依次替换大括号内变量的功能，能够提升用户的交互体验。

总结

通过这篇文章，我们学习了如何在 Vue3 中实现自动选中和替换变量的功能。在用户体验友好的场景中，这种输入框的设计将非常实用，特别是在动态表单或者模板内容填充中。希望这篇文章对你有所帮助！

作者：cnsource

链接：https://juejin.cn

+友情链接