web-dev-qa-db-ja.com

<input>内に<span>を配置するにはどうすればよいですか？

これは重複ではありません。基本的に 他の投稿 と同じ結果を探していましたが、別の方法でやりたかったのです。背景画像を使用していたので、<span>を使用したかったです。

ユーザーがテキストボックスに入力すると、右側に「X」が表示されるように、テキストボックスを作成しようとしています。ただし、現在のように、ボックスにテキストがないときに「X」が表示されないようにします。

「X」を白にして、スライドすると色が変わるようにしましたが、マウスを下にドラッグすると選択できます。

テキストボックス内に（なんとかして）配置し、overflow: hiddenを使用して右にスライドして非表示にする必要があると考えています。私もこれをやろうとしましたが、どこにも行けませんでした。

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

<span>は、表示されていないときは白い背景の「背後」にあるはずです。中間遷移は次のようになります。

x.jpg
（ソース： googledrive.com ）

CSSでこれは可能ですか？もし可能なら、どうすればできますか？

cssinputhidecss-transitions
14
Drazzah

入力とスパンの両方をコンテナ内にラップし、このコンテナを相対として、スパンを絶対として配置します。これで、スパンを使用して何でもできます。

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>
19
Antoine Combes

この更新されたフィドルをご覧ください。

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に保持できます。これにより、再表示時に物事がスムーズになります。 「真の」ifステートメントの使用に注意してください。

1
beautifulcoder

デフォルトで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/

1
nunoarruda