如何将光标定位在搜索字段中占位符之后

Question

我正在使用 Vue 开发一个小型应用程序，并且有一个输入类型搜索。问题是光标显示在输入的开头，但我希望它显示在占位符文本之后。我怎样才能实现这个目标？

这是我的代码：

.search {
  height: 36px;
  width: 256px;
  margin-right: 42px;
  border: 1px solid #76b1c5;
  box-sizing: border-box;
  border-radius: 18px;
}

<input
 type="search"
 name=""
 id=""
 class="search"
 placeholder="search" />

和我的CSS：

.search {
  height: 36px;
  width: 256px;
  margin-right: 42px;
  border: 1px solid #76b1c5;
  box-sizing: border-box;
  border-radius: 18px;
}

Answer 1

根据您当前的设置，您无法执行此操作。

原因是光标出现在占位符文本开始的同一位置。因此，无论您如何更改占位符文本或光标，它们始终会从同一位置开始。

如果您希望断开光标与占位符文本的连接，那么您将需要创建单独的元素才能完成此操作。例如，使用标签、div、span 或某种元素组合将文本置于文档流之外，以便可将其移除并与更改布局分开。此外，这意味着实现占位符逻辑，或将占位符保留为标签。

Answer 2

为了确保当输入字段获得焦点时光标出现在占位符文本之后，您不能直接通过 CSS 或在占位符的情况下直接通过 HTML 属性操作光标位置。除非用户开始输入，否则光标自然会出现在输入的开头。

但是，使用 Vue.js 实现此目的的解决方法包括将输入的初始值设置为占位符，然后在用户与其交互时清除它。以下是修改 Vue 组件来处理此问题的方法：

以占位符作为值的初始状态：将输入的初始值设置为占位符。

焦点事件：如果该值与占位符匹配，则清除焦点上的该值。

模糊事件：如果用户将输入留空，则重置为占位符。

这是 Vue 中的一个简单示例：

<template>
  <div>
    <input
      v-model="inputValue"
      @focus="handleFocus"
      @blur="handleBlur"
      class="search"
      :placeholder="placeholder"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      placeholder: 'Search',
      inputValue: 'Search', // Initial value is the placeholder
    };
  },
  methods: {
    handleFocus() {
      if (this.inputValue === this.placeholder) {
        this.inputValue = ''; // Clear the input on focus if it's the placeholder
      }
    },
    handleBlur() {
      if (this.inputValue.trim() === '') {
        this.inputValue = this.placeholder; // Reset to placeholder if empty
      }
    }
  }
}
</script>

<style>
.search {
  height: 36px;
  width: 256px;
  margin-right: 42px;
  border: 1px solid #76b1c5;
  box-sizing: border-box;
  border-radius: 18px;
}
</style>

此方法使光标在聚焦时出现在输入字段的末尾（如果它最初设置为占位符），模仿您正在寻找的行为。请注意，此技术涉及使用占位符文本作为初始值，这可能并不适合所有场景，特别是如果输入应根据其内容进行验证。