Quero ter um pequeno ícone bonito que, quando clicado, apaga o texto na caixa <INPUT>.
Isso é para economizar espaço, em vez de ter um link claro fora da caixa de entrada.
Minhas habilidades de CSS são fracas ... Aqui está uma foto da captura de tela da aparência do iPhone.
Respostas:
@thebluefox resumiu o máximo de tudo. Você também é obrigado a usar o JavaScript para fazer com que esse botão funcione de qualquer maneira. Aqui está um SSCCE, você pode copiá-lo e colar:
<!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 não é necessário, apenas separa bem a lógica necessária para aprimoramento progressivo da fonte, é claro que você também pode prosseguir com HTML / CSS / JS simples :
<!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>Você acaba com HTML mais feio (e JS não compatível com o navegador cruzado).
Observe que quando a aparência da interface do usuário não é sua maior preocupação, mas a funcionalidade é, basta usar em <input type="search">vez de <input type="text">. Ele mostrará o botão claro (específico do navegador) nos navegadores compatíveis com HTML5.
class="fa fa-remove"o espaço interior para exibir um ícone de cruz agradável
top:no período filho e definindo display: flex; align-items: center;no período pai.
Atualmente, com o HTML5, é bem simples:
<input type="search" placeholder="Search..."/>A maioria dos navegadores modernos renderiza automaticamente um botão Limpar utilizável no campo por padrão.
(Se você usa o Bootstrap, terá que adicionar uma substituição ao seu arquivo css para mostrar)
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
Os navegadores Safari / WebKit também podem fornecer recursos extras ao usar type="search", como results=5e autosave="...", mas também substituem muitos de seus estilos (por exemplo, altura, bordas). Para impedir essas substituições, mantendo a funcionalidade como o botão X, você pode adicionar isso ao seu css:
input[type=search] {
-webkit-appearance: none;
}Consulte css-tricks.com para obter mais informações sobre os recursos fornecidos por type="search".
O HTML5 apresenta o tipo de entrada 'search' que acredito que faz o que você deseja.
<input type="search" />
Aqui está um exemplo ao vivo .
Confira nosso plugin jQuery-ClearSearch . É um plugin jQuery configurável - é fácil adaptá-lo às suas necessidades, estilizando o campo de entrada. Basta usá-lo da seguinte maneira:
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>Exemplo: http://jsfiddle.net/wldaunfr/FERw3/
Infelizmente, você não pode colocá-lo dentro da caixa de texto, apenas fazer parecer que está dentro dela, o que infelizmente significa que é necessário algum css: P
A teoria é agrupar a entrada em uma div, remover todas as bordas e fundos da entrada e estilizar a div para parecer com a caixa. Em seguida, solte seu botão após a caixa de entrada no código e os trabalhos serão executados.
Depois que você tiver que trabalhar de qualquer maneira;)
Eu tenho uma solução criativa que acho que você está procurando
$('#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>Obviamente, a melhor abordagem é usar o recurso cada vez mais suportado <input type="search" /> .
De qualquer forma, para me divertir um pouco com a codificação, pensei que isso poderia ser alcançado também usando o botão de redefinição do formulário, e este é o resultado do trabalho (vale a pena notar que não pode viver outras entradas, mas o campo de pesquisa com essa abordagem ou o botão de redefinição será apagado também), não é necessário 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>Talvez esta solução simples possa ajudar:
<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>@Mahmoud Ali Kaseem
Acabei de alterar algumas CSS para torná-las diferentes e adicionar foco ();
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>