it-swarm.com.de

Wie füge ich eine klare Schaltfläche in mein HTML-Texteingabefeld ein wie das iPhone?

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

Das spart Platz, anstatt eine eindeutige Verknüpfung außerhalb des Eingabefelds zu haben.

Meine CSS-Fähigkeiten sind schwach ... Hier ist ein bildschirmfoto Foto, wie das iPhone aussieht.

107
Hugh Buchanan

@thebluefox hat am meisten zusammengefasst. Sie müssen lediglich JavaScript verwenden, damit diese Schaltfläche trotzdem funktioniert. Hier ist ein SSCCE, den Sie kopieren und kopieren 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 einfach die Logik, die für die progressive Verbesserung von der Quelle benötigt wird, Sie können natürlich auch plain HTML/CSS/JS verwenden:

<!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 mit Crossbrowser kompatible JS;)).

Beachten Sie, dass das Aussehen und die Benutzerfreundlichkeit der Benutzeroberfläche nicht Ihre größte Sorge sind, aber die Funktionalität ist, dann verwenden Sie <input type="search"> anstelle von <input type="text">. Auf HTML5-fähigen Browsern wird die (browserspezifische) Schaltfläche angezeigt.

89
BalusC

Heutzutage ist es mit HTML5 ziemlich einfach:

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

Die meisten modernen Browser zeigen standardmäßig standardmäßig eine verwendbare Schaltfläche zum Löschen an.

 plain HTML5 search input field

(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;
}

 bootstrap search input field

Safari/WebKit-Browser können auch zusätzliche Funktionen bereitstellen, wenn Sie type="search" verwenden, wie results=5 und autosave="...". Sie überschreiben jedoch auch viele Ihrer Stile (z. B. Höhe, Rahmen). Um diese Überschreibungen zu verhindern und die Funktionalität wie die X-Taste beizubehalten, können Sie dies zu Ihrer CSS hinzufügen:

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

Siehe css-tricks.com für weitere Informationen über die Funktionen von type="search".

107
Nick Sweeting

HTML5 führt den Eingabetyp "search" ein, von dem ich glaube, dass er das tut, was Sie möchten.

<input type="search" />

Hier ist ein Live-Beispiel .

35
ThorSummoner

Schauen Sie sich unser jQuery-ClearSearch Plugin an. Es ist ein konfigurierbares jQuery-Plugin - die Anpassung an Ihre Bedürfnisse durch die 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/

24
wldaunfr

Sie können es leider nicht wirklich in das Textfeld einfügen, sondern nur so aussehen, als wäre es darin, was leider bedeutet, dass einige CSS benötigt werden: P

Die Theorie besteht darin, die Eingabe in ein Div einzubinden, alle Grenzen und Hintergründe von der Eingabe zu nehmen und das Div so zu gestalten, dass es wie das Kästchen aussieht. Dann hinterlassen Sie Ihren Button hinter dem Eingabefeld im Code und die Jobs sind gut.

Sobald Sie es trotzdem haben, um zu arbeiten;)

16
Tom

Ich habe eine kreative Lösung gefunden, 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>

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

3

Natürlich ist der beste Ansatz, den immer mehr unterstützten <input type="search" /> zu verwenden.

Für ein bisschen Codierspaß dachte ich, dass dies auch mit der Reset-Taste des Formulars erreicht werden kann. Dies ist das Arbeitsergebnis (es lohnt sich, andere Eingaben nicht zu nutzen, außer das Suchfeld mit dieser Methode oder die Reset-Taste 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>

0
TechNyquist

@Mahmoud Ali Kaseem

Ich habe gerade ein paar CSS geändert, um es anders aussehen zu lassen und focus () hinzuzufügen.

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>

0
Hiren