Wie füge ich wie das iPhone eine Schaltfläche zum Löschen in mein HTML-Texteingabefeld ein?

131

Ich möchte ein nettes kleines Symbol haben, das beim Klicken den Text im Feld <EINGABE> löscht.

Dies dient dazu, Platz zu sparen, anstatt eine eindeutige Verknüpfung außerhalb des Eingabefelds zu haben.

Meine CSS-Kenntnisse sind schwach ... Hier ist ein Screenshot, wie das iPhone aussieht.

javascript iphone html css Hugh Buchanan
quelle

Antworten:

93

@thebluefox hat am allermeisten zusammengefasst. Sie müssen nur JavaScript verwenden, damit diese Schaltfläche trotzdem funktioniert. Hier ist eine SSCCE, die Sie kopieren und einfügen und ausführen können:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
                    $(this).prev('input').val('').trigger('change').focus();
                }));
            });
        </script>
        <style>
            span.deleteicon {
                position: relative;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 5px;
                right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 16px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <input type="text" class="deletable">
    </body>
</html>

Live Beispiel hier .

jQuery ist übrigens nicht notwendig, es trennt nur die Logik, die für die progressive Verbesserung benötigt wird, von der Quelle. Sie können natürlich auch mit einfachem HTML / CSS / JS fortfahren:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532, with "plain" HTML/CSS/JS</title>
        <style>
            span.deleteicon {
                position: relative;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 5px;
                right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 16px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <span class="deleteicon">
            <input type="text">
            <span onclick="var input = this.previousSibling; input.value = ''; input.focus();"></span>
        </span>
    </body>
</html>

Sie erhalten nur hässlicheres HTML (und nicht Crossbrowser-kompatibles JS;)).

Beachten Sie, dass, wenn das Aussehen und Verhalten der Benutzeroberfläche nicht Ihr größtes Anliegen ist, sondern die Funktionalität, dann verwenden Sie einfach <input type="search">statt <input type="text">. In HTML5-fähigen Browsern wird die (browserspezifische) Schaltfläche zum Löschen angezeigt.

BalusC
quelle
7
möglich, die Schaltfläche zum Löschen auszublenden, wenn das Textfeld leer ist?
Wurzel
In IE9 schwebt der Text unter dem Kreuzsymbol.
Sedovav
Seit dem Themawechsel ist die URL für das Bild nicht mehr korrekt. Das alte Bild kann unter web.archive.org/web/20150101025546/http://cdn.sstatic.net/…
zacaj
1
Sie können auch font-awesome Symbole mit class="fa fa-remove"auf der inneren Spanne verwenden, um ein schönes Kreuz Symbol
anzuzeigen
Ich habe die reine Javascript-Version verwendet und sie hat gut funktioniert, außer dass die Schaltfläche auf Win / Linux Firefox / Chrome zentriert wurde. Ich habe das gelöst, indem ich top:die untergeordnete Spanne entfernt und display: flex; align-items: center;die übergeordnete Spanne eingestellt habe.
thomasa88
157

Heutzutage ist es mit HTML5 ziemlich einfach:

<input type="search" placeholder="Search..."/>

Die meisten modernen Browser rendern standardmäßig automatisch eine verwendbare Schaltfläche zum Löschen im Feld.

einfaches HTML5-Sucheingabefeld

(Wenn Sie Bootstrap verwenden, müssen Sie Ihrer CSS-Datei eine Überschreibung hinzufügen, damit sie angezeigt wird.)

input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

Eingabefeld für die Bootstrap-Suche

Safari / WebKit-Browser können bei der Verwendung von type="search"wie results=5und zusätzliche Funktionen bereitstellen autosave="...", sie überschreiben jedoch auch viele Ihrer Stile (z. B. Höhe, Rahmen). Um diese Überschreibungen zu verhindern und gleichzeitig Funktionen wie die X-Schaltfläche beizubehalten, können Sie diese zu Ihrem CSS hinzufügen:

input[type=search] {
    -webkit-appearance: none;
}

Weitere Informationen zu den von bereitgestellten Funktionen finden Sie unter css-tricks.comtype="search" .

Nick Sweeting
quelle
3
Hervorragende Antwort, kein Code. Leider nicht von vielen Browsern unterstützt. Nevermind, wäre eine zusätzliche Chrome-Funktion in meinem Produkt :)
Guillaumepotier
48

HTML5 führt den Eingabetyp "Suche" ein, von dem ich glaube, dass er das tut, was Sie wollen.

<input type="search" />

Hier ist ein Live-Beispiel .

ThorSummoner
quelle
4
Obwohl der Suchtyp von allen aktuellen Browsern unterstützt wird (überprüfen Sie die Unterstützung hier: wufoo.com/html5), wird die Schaltfläche zum Löschen in Firefox (32.0.3) oder Opera (12.17) nicht angezeigt.
Justanotherprogrammer
9
Die Schaltfläche zum Löschen wird auch in der neuesten
Version von
3
Wenn Sie Bootstrap verwenden, kann es das Standardverhalten überschreiben
aexl
Dem verknüpften CodePen fehlt der schließende Schrägstrich in der Eingabe. Wenn Sie also möchten, dass er auf CodePen funktioniert, fügen Sie einfach den schließenden Schrägstrich hinzu.
Gen1-1
@ Gen1-1 oops, es sieht so aus, als wären öffentliche Uploads deaktiviert. Blog.codepen.io/2019/08/06/anonymous-pen-save-option-removed Wenn jemand einen festen Codestift hat, können Sie ihn gerne bearbeiten und bei der Korrektur helfen Demo
ThorSummoner
24

Schauen Sie sich unser jQuery-ClearSearch- Plugin an. Es ist ein konfigurierbares jQuery-Plugin - die Anpassung an Ihre Bedürfnisse durch Gestaltung des Eingabefelds ist unkompliziert. Verwenden Sie es einfach wie folgt:

<input class="clearable" type="text" placeholder="search">

<script type="text/javascript">
    $('.clearable').clearSearch();
</script>

Beispiel: http://jsfiddle.net/wldaunfr/FERw3/

wldaunfr
quelle
Das ist großartig, aber ich würde empfehlen, "$ (window) .resize (function () {triggerBtn ()})" hinzuzufügen. in jquery.clearsearch.js direkt nach $ this.on ('keyup keydown change focus', triggerBtn); | Damit die Größe der Fenster nicht geändert wird, wird die Kreuzposition nicht durcheinander gebracht
Ng Sek Long,
17

Sie können es leider nicht in das Textfeld einfügen, sondern nur so aussehen lassen, dass es darin enthalten ist, was leider bedeutet, dass etwas CSS benötigt wird: P.

Die Theorie besteht darin, die Eingabe in ein Div zu packen, alle Ränder und Hintergründe von der Eingabe zu entfernen und das Div so zu gestalten, dass es wie die Box aussieht. Dann lassen Sie Ihre Schaltfläche nach dem Eingabefeld im Code und den Jobs ein gutes Stück fallen.

Sobald du es trotzdem zum Laufen gebracht hast;)

Tom
quelle
6

Ich habe eine kreative Lösung, nach der Sie suchen 

$('#clear').click(function() {
  $('#input-outer input').val('');
});
body {
  font-family: "Tahoma";
}
#input-outer {
  height: 2em;
  width: 15em;
  border: 1px #e7e7e7 solid;
  border-radius: 20px;
}
#input-outer input {
  height: 2em;
  width: 80%;
  border: 0px;
  outline: none;
  margin: 0 0 0 10px;
  border-radius: 20px;
  color: #666;
}
#clear {
  position: relative;
  float: right;
  height: 20px;
  width: 20px;
  top: 5px;
  right: 5px;
  border-radius: 20px;
  background: #f1f1f1;
  color: white;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
#clear:hover {
  background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
  <input type="text">
  <div id="clear">
    X
  </div>
</div>
Erweitern Sie das Snippet

https://jsfiddle.net/qdesign/xn9eogmx/1/

Mahmoud Ali Kassem
quelle
3

Der beste Ansatz ist natürlich, die immer stärker unterstützten zu verwenden <input type="search" />.

Wie auch immer, für ein bisschen Spaß beim Codieren dachte ich, dass dies auch mit der Reset-Schaltfläche des Formulars erreicht werden könnte, und dies ist das Arbeitsergebnis (es lohnt sich, Notizen zu machen, die keine anderen Eingaben leben können, aber das Suchfeld mit diesem Ansatz, oder die Reset-Schaltfläche wird gelöscht sie auch), kein Javascript benötigt:

form > div{
    position: relative;
    width: 200px;
}

form [type="text"] {
    width: 100%;
    padding-right: 20px;
}

form [type="reset"] {
    position: absolute;
    border: none;
    display: block;
    width: 16px;
    border-radius: 20px;
    top: 2px;
    bottom: 2px;
    right: -20px;
    background-color: #ddd;
    padding: 0px;
    margin: 0px;
}
<form>
	<div>
		<input type="text" />
		<input type="reset" value="X" />
	</div>
</form>
Erweitern Sie das Snippet

TechNyquist
quelle
1

Vielleicht kann diese einfache Lösung helfen:

<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>
Erweitern Sie das Snippet

Mehran Shagerdi
quelle
Dieser Code bietet möglicherweise eine Lösung für das OP-Problem. Es wird jedoch dringend empfohlen, einen zusätzlichen Kontext anzugeben, in dem erläutert wird, warum und / oder wie dieser Code die Frage beantwortet. Nur-Code-Antworten werden auf lange Sicht normalerweise unbrauchbar, da zukünftige Betrachter mit ähnlichen Problemen die Gründe für die Lösung nicht verstehen können.
E. Zeytinci
-1

@ Mahmoud Ali Kaseem

Ich habe gerade etwas CSS geändert, damit es anders aussieht, und habe focus () hinzugefügt.

https://jsfiddle.net/xn9eogmx/81/

$('#clear').click(function() {
  $('#input-outer input').val('');
  $('#input-outer input').focus();
});
body {
  font-family: "Arial";
  font-size: 14px;
}
#input-outer {
  height: 2em;
  width: 15em;
  border: 1px #777 solid;
  position: relative;
  padding: 0px;
  border-radius: 4px;
}
#input-outer input {
  height: 100%;
  width: 100%;
  border: 0px;
  outline: none;
  margin: 0 0 0 0px;
  color: #666;
  box-sizing: border-box;
  padding: 5px;
  padding-right: 35px;
  border-radius: 4px;
}
#clear {
  position: absolute;
  float: right;
  height: 2em;
  width: 2em;
  top: 0px;
  right: 0px;
  background: #aaa;
  color: white;
  text-align: center;
  cursor: pointer;
  border-radius: 0px 4px 4px 0px;
}
#clear:after {
  content: "\274c";
  position: absolute;
  top: 4px;
  right: 7px;
}
#clear:hover,
#clear:focus {
  background: #888;
}
#clear:active {
  background: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
  <input type="text">
  <div id="clear"></div>
</div>
Erweitern Sie das Snippet

Hiren
quelle