时间戳

首页 > 解决方案 > 如何在占位符后将光标定位在搜索字段中

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

问题描述

我正在为一个小型应用程序使用 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;
}

标签： htmlcssvue.js

解决方案

鉴于您当前的设置，您无法执行此操作。

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

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

推荐阅读