Voglio avere una bella piccola icona che, una volta cliccata, cancella il testo nella casella <INPUT>.
Questo per risparmiare spazio piuttosto che avere un chiaro link al di fuori della casella di input.
Le mie abilità CSS sono deboli ... Ecco una foto di screenshot di come appare l'iPhone.
Risposte:
@thebluefox ha riassunto soprattutto. Sei anche costretto a usare JavaScript per far funzionare comunque quel pulsante. Ecco un SSCCE, puoi copiarlo e incollarlo:
<!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 non è tra l'altro necessaria, semplicemente ben separa la logica necessaria per il miglioramento progressivo dalla fonte, si può naturalmente anche andare avanti con il semplice HTML / CSS / JS:
<!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>
Finisci solo con un brutto HTML (e JS non compatibile con i browser);
Tieni presente che quando l'interfaccia utente non è la tua più grande preoccupazione, ma la funzionalità lo è, usa semplicemente <input type="search">invece di <input type="text">. Mostrerà il pulsante di cancellazione (specifico del browser) sui browser compatibili con HTML5.
class="fa fa-remove"sull'intervallo interno per visualizzare una bella icona a croce
top:l'intervallo figlio e impostandolo display: flex; align-items: center;nell'intervallo padre.
Oggi con HTML5 è abbastanza semplice:
<input type="search" placeholder="Search..."/>La maggior parte dei browser moderni renderà automaticamente un pulsante di cancellazione utilizzabile nel campo per impostazione predefinita.
(Se usi Bootstrap, dovrai aggiungere una sostituzione al tuo file css per mostrarlo)
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
I browser Safari / WebKit possono anche fornire funzionalità extra quando si usano type="search", come results=5e autosave="...", ma hanno anche la precedenza su molti dei tuoi stili (ad es. Altezza, bordi). Per evitare tali sostituzioni, pur mantenendo le funzionalità come il pulsante X, è possibile aggiungere questo al tuo CSS:
input[type=search] {
-webkit-appearance: none;
}
Vedi css-tricks.com per maggiori informazioni sulle funzionalità fornite da type="search".
HTML5 introduce il tipo di input "cerca" che credo faccia quello che vuoi.
<input type="search" />
Ecco un esempio dal vivo .
Dai un'occhiata al nostro plugin jQuery-ClearSearch . È un plug-in jQuery configurabile: adattarlo alle tue esigenze disegnando il campo di input è semplice. Usalo come segue:
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>
Esempio: http://jsfiddle.net/wldaunfr/FERw3/
Sfortunatamente non puoi metterlo all'interno della casella di testo, fai solo sembrare che sia al suo interno, il che purtroppo significa che sono necessari alcuni CSS: P
La teoria è avvolgere l'input in un div, togliere tutti i bordi e gli sfondi dall'input, quindi modellare il div in modo che assomigli al riquadro. Quindi, rilasciare il pulsante dopo la casella di input nel codice e fare un buon lavoro.
Una volta che hai comunque funzionato;)
Ho una soluzione creativa che penso tu stia cercando
$('#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>Ovviamente l'approccio migliore è quello di utilizzare il sempre più supportato <input type="search" />.
Comunque per un po 'di divertimento con la programmazione ho pensato che potesse essere raggiunto anche usando il pulsante di reset del modulo, e questo è il risultato di lavoro (vale la pena notare che non può vivere altri input ma il campo di ricerca con questo approccio, o il pulsante di reset cancellerà anche loro), non è necessario javascript:
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>Forse questa semplice soluzione può aiutare:
<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>@Mahmoud Ali Kaseem
Ho appena cambiato alcuni CSS per renderlo diverso e ho aggiunto focus ();
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>