输入左填充使光标跳转

Question

我有基本的

HTML

<div>
  <i class="fa fa-search" id="searchIcon"></i>//you need to use Font awesome
  <input type="text" id="inputField"/>
</div>

CSS

#searchIcon{
  position:absolute;
  font-size:14px;
  padding-top:6px;
  padding-left:3px;
}
#inputField{
  padding-left:20px;
}

因此，当我单击该输入光标时，插入符号首先出现在输入字段的左侧（忽略填充），然后跳转到正确的位置。有没有办法防止这种行为？

Answer 1

这是解决该问题的方法。由于这样做时光标会跳动，因此请将 <input> 封装在一个包装器中，这样您就可以在左侧放置图标，在其旁边放置输入框。出于所有意图和目的，它对用户来说看起来是一样的。这样就不需要移动光标了。

有关工作示例，请参见下面的代码。我在您看不到的输入周围添加了一个包装器，并将 padding 班次更改为 margin 班次。（我使用基本的 HTML 图标作为 Font Awesome 图标的占位符。）

#searchIcon{
  position:absolute;
  font-size:14px;
  padding-top:6px;
  padding-left:3px;
}

#inputField{
  margin-left:20px;
  border: none;
}

#wrapper {
  height: 1.2em;
  width: 11em;
  border: 1px solid black;
  background-color: white;
}

<div id="wrapper">
  <i class="fa fa-search" id="searchIcon">&#128270;</i>
  <input type="text" id="inputField"/>
</div>

输入左填充使光标跳转

Input left padding make cursor jump

html

css

padding