javascript - onfocus 关闭图标应显示在右侧

Question

我做了 float 文本输入，当用户专注于输入时，我的文本会 float ，但当用户点击我的输入时，我的输入中也需要一个“关闭 x”图标。

To include "x cloase" icon I want to use "font-awesome" 
<i class="fa fa-times-circle" aria-hidden="true"></i> 

当用户在输入之外单击时，不应显示关闭图标。

请帮助我如何在输入焦点上显示我的关闭图标，下面是我的代码以供引用。

.floatInput>input:focus~.floating-label,
.floatInput>input:not(:focus):valid~.floating-label {
  top: 0px;
  left: 18px;
  font-size: 11px;
  opacity: 1;
}

.floatInput>.inputText {
  font-size: 16px;
  width: 100%;
  height: 50px;
  padding-left: 16px;
  padding-top: 10px;
  border: 1px solid #ddd;
  text-shadow: none;
  box-shadow: none;
}

.floatInput>.floating-label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 15px;
  transition: 0.2s ease all;
}

.btn.header-navbar-button.buttonRight {
  background: #3170b7;
  border: 1px solid #3170b7;
  color: #fff;
  padding-top: 14px;
  padding-bottom: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group ml15 mt20 column90 floatInput">
  <input type="text" class="inputText" required/>
  <span class="floating-label">Your email address</span>
  <span class="input-group-btn">
<button class="btn header-navbar-button buttonRight" type="button">
check IMEI
</button>
</span>
</div>

Answer 1

我不能说你的问题对我来说是 100% 清楚的，但这是我根据你的代码所做的:
我添加了一个带有新类 .floating-close 的新 div，以使用 FontAwesome 中的图标并创建您的关闭按钮。
然后我使用 CSS 对其进行了一些样式化……

这是我最终得到的片段:

.floatInput>input:focus~.floating-label,
.floatInput>input:not(:focus):valid~.floating-label {
  top: 0px;
  left: 18px;
  font-size: 11px;
  opacity: 1;
}

.floating-close {
  display: none;
}

.floatInput>input:focus~.floating-close {
  display: block;
}

.floatInput>.inputText {
  font-size: 16px;
  width: 100%;
  height: 50px;
  padding-left: 16px;
  padding-top: 10px;
  border: 1px solid #ddd;
  text-shadow: none;
  box-shadow: none;
}

.floatInput>.floating-label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 15px;
  transition: 0.2s ease all;
}

.floatInput>.floating-close {
  position: absolute;
  cursor: pointer;
  right: 10px;
  top: 15px;
  transition: 0.2s ease all;
}

.btn.header-navbar-button.buttonRight {
  background: #3170b7;
  border: 1px solid #3170b7;
  color: #fff;
  padding-top: 14px;
  padding-bottom: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<div class="input-group ml15 mt20 column90 floatInput">
  <input type="text" class="inputText" required/>
  <span class="floating-label">Your email address</span>
  <span class="floating-close"><i class="fa fa-times-circle" aria-hidden="true"></i></span>
  <span class="input-group-btn">
<button class="btn header-navbar-button buttonRight" type="button">
check IMEI
</button>
</span>
</div>

希望对你有帮助。