如何将<span>放入<input>中？

Question

这不是一个重复的问题。虽然我基本上正在寻找与其他帖子相同的结果，但我想用不同的方式去解决它。他们使用背景图片，而我想使用<span>。

我正在尝试制作一个文本框，当用户在其中输入时，右侧会出现一个“X”。 但是，当框中没有文本时，我不希望“X”出现，就像现在一样。

我试图使“X”变白，并在它滑动时过渡它的颜色，但是当您将mousedown拖动到它上面时，您仍然可以选择它。

我想可能需要将其放入文本框中（以某种方式），然后将其向右滑动并使用overflow:hidden隐藏它。 我也尝试过这样做，但无法得到任何进展。

http://jsfiddle.net/qgy8Ly5L/16/

<span>应该在不显示时在白色背景“后面”。 中间转换应如下所示：

_{（来源：googledrive.com）}

在CSS中是否可以实现，如果可以，如何实现？

- Drazzah

Answer 1

将输入框和span标签放在一个容器中，将该容器设置为相对定位，将span标签设置为绝对定位。现在你可以随意处理这个span标签了。

function checkInput(text) {

  if (text) {
    $("#clearBtn1").addClass("show");
  } else {
    $("#clearBtn1").removeClass("show");
  }

}

.text-container {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.clearBtn {
  position: absolute;
  top: 0;
  right: -15px;
  transition: right 0.2s;
}
.show {
  right: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
  <input type="text" onkeyup="checkInput(this.value)" />
  <span id="clearBtn1" class="clearBtn">X</span>
</div>

- Antoine Combes

---

非常感谢，@AntoineCombes。那救了我很多... - Ian Hazzard

Answer 2

默认情况下隐藏X，并在需要时使用show类。

.clearBtn {
    position: relative;
    left: 0;
    transition: left 0.3s;
    display: none;
}
.show {
    display: inline;
}

JS

function checkInput(text) {

    if (text != ""){
        $("#clearBtn1").addClass("show");
    } else {
        $("#clearBtn1").removeClass("show");
    }

}

http://jsfiddle.net/qgy8Ly5L/18/

- nunoarruda

Answer 3

查看这个更新的 fiddle：

function checkInput(text) {
    if (text) {
        $("#clearBtn1").addClass("show");
    } else {
        $("#clearBtn1").removeClass("show");
    }
}

.clearBtn {
    position: relative;
    left: 0;
    transition: left 0.3s;
    visibility: hidden;
}

.show {
    left: -18px;
    visibility: visible;
}

http://jsfiddle.net/qgy8Ly5L/19/

通过使用visibility，您可以使元素保留在DOM中。这将使其重新出现时的过渡更加平滑。请注意"truthy" if语句的使用。

- beautifulcoder

---

非常感谢您的回答，也许我的问题表述不够清晰。请查看我在问题中添加的图片。 - Ian Hazzard