web-dev-qa-db-fra.com

Comment puis-je mettre un <span> à l'intérieur d'un <input>?

Ce n'est pas un doublon. Alors que je cherchais essentiellement le même résultat que l'autre post , je voulais m'y prendre d'une manière différente. Ils utilisaient une image d'arrière-plan, et je voulais utiliser un <span>.

J'essaie de créer une zone de texte de sorte que lorsque l'utilisateur tape dessus, un "X" s'affiche à droite. Cependant, je ne veux pas que le "X" apparaisse lorsqu'il n'y a pas de texte dans la boîte, comme c'est le cas maintenant.

J'ai essayé de rendre le "X" blanc, et de lui faire passer sa couleur quand il glisse, mais vous pouvez toujours le sélectionner lorsque vous faites glisser le curseur de la souris dessus.

Je pense que je dois le mettre dans la zone de texte (en quelque sorte), puis le faire glisser vers la droite et le masquer en utilisant overflow: hidden. J'ai aussi essayé de faire ça, mais je n'ai pu aller nulle part avec ça.

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

Le <span> devrait être "derrière" le fond blanc lorsqu'il ne s'affiche pas. La transition intermédiaire devrait ressembler à ceci:

x.jpg
(source: googledrive.com )

Est-ce possible en CSS, et si oui, comment puis-je le faire?

cssinputhidecss-transitions
14
Drazzah

Enveloppez à la fois votre entrée et votre durée dans un conteneur, positionnez ce conteneur comme relatif et la durée comme absolue. Vous pouvez maintenant faire ce que vous voulez avec l'intervalle.

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

Découvrez ce violon mis à jour:

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/

En utilisant visibility, vous pouvez conserver l'élément dans le DOM. Cela gardera les choses lisses quand il réapparaîtra. Remarquez l'utilisation d'une déclaration "véridique" si.

1
beautifulcoder

Masquer le X par défaut et utiliser la classe show en cas de besoin

.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