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图标的占位符。）

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

输入左边填充使光标跳转

1 个答案: