webentwicklung-frage-antwort-db.com.de

Wie kann ich ein <span> innerhalb eines <input> setzen?

Dies ist kein Duplikat. Während ich im Grunde das gleiche Ergebnis suchte wie der andere Beitrag , wollte ich es auf eine andere Art und Weise angehen. Sie verwendeten ein Hintergrundbild und ich wollte einen <span> Verwenden.

Ich versuche, ein Textfeld zu erstellen, sodass beim Eingeben durch den Benutzer rechts ein "X" angezeigt wird. Ich möchte jedoch nicht, dass das "X" angezeigt wird, wenn sich kein Text im Feld befindet, wie dies jetzt der Fall ist.

Ich habe versucht, das "X" weiß zu machen und die Farbe beim Verschieben zu ändern, aber Sie können es trotzdem auswählen, wenn Sie den Mauszeiger darüber ziehen.

Ich denke, ich muss es (irgendwie) in das Textfeld einfügen, dann nach rechts schieben und es mit overflow: hidden Verstecken. Ich habe auch versucht, dies zu tun, aber ich konnte damit nichts anfangen.

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

Das <span> Sollte sich "hinter" dem weißen Hintergrund befinden, wenn es nicht angezeigt wird. Der mittlere Übergang sollte folgendermaßen aussehen:

x.jpg
(Quelle: googledrive.com )

Ist dies in CSS möglich und wenn ja, wie kann ich das tun?

14
Drazzah

Wickeln Sie sowohl Ihre Eingabe als auch Ihre Spanne in einen Container, positionieren Sie diesen Container als relativ und die Spanne als absolut. Sie können nun mit der Spanne machen, was Sie wollen.

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

Schauen Sie sich diese aktualisierte Geige an:

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/

Mit visibility können Sie das Element im DOM behalten. Dies hält die Dinge glatt, wenn es wieder erscheint. Beachten Sie die Verwendung einer "wahrheitsgemäßen" if-Anweisung.

1
beautifulcoder

Blenden Sie das X standardmäßig aus und verwenden Sie bei Bedarf die Show-Klasse

.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