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.
Antworten:
@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>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.
class="fa fa-remove"auf der inneren Spanne verwenden, um ein schönes Kreuz Symbol
top:die untergeordnete Spanne entfernt und display: flex; align-items: center;die übergeordnete Spanne eingestellt habe.
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.
(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;
}
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" .
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 .
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/
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;)
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>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>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>@ 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>