如何将<span>放在<input />？</span>中

Question

这不重复。虽然我基本上寻找与the other post相同的结果，但我想以不同的方式去做。他们使用的是背景图片，我想使用<span>。

我正在尝试创建一个文本框，以便当用户输入文本框时，右侧会显示“X”。但是，当盒子里没有文字时，我不希望“X”出现，就像现在一样。

我尝试将“X”设为白色，并在滑动时将其转换为颜色，但是当您将mousedown拖到它上面时仍然可以选择。

我想我需要将它放在文本框中（不知何故），然后将其滑动到右侧并使用overflow: hidden隐藏它。我也尝试过这样做，但我无法随心所欲。

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

当<span>未显示时，{{1}}应该在白色背景后面“。中期过渡应如下所示：

CSS中是否可以，如果可以，我该怎么做？

Answer 1

将输入和跨度包裹在容器内，将此容器定位为相对容器，将跨度定位为绝对容器。你现在可以用跨度做任何你喜欢的事。

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>

Answer 2

默认隐藏X并在需要时使用show class

.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/

Answer 3

查看这个更新的小提琴：

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语句。