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

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或某些元素组合将文本从文档流中删除，以便将其可移除并与更改布局分离。此外，这意味着实现占位符逻辑，或者将占位符保留为标签。