Como coloco um botão Limpar dentro da minha caixa de entrada de texto HTML, como o iPhone faz?

131

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.

javascript iphone html css Hugh Buchanan
fonte

Respostas:

93

@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>

Exemplo ao vivo aqui .

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.

BalusC
fonte
7
possível ocultar o botão Limpar quando o campo de texto estiver vazio?
root
No IE9, o texto flutua sob o ícone de cruz.
sedovav
desde que o tema foi alterado, o URL da imagem não está mais correto. a imagem antiga pode ser acessada em web.archive.org/web/20150101025546/http://cdn.sstatic.net/…
zacaj
1
Você também pode usar ícones font-impressionante com class="fa fa-remove"o espaço interior para exibir um ícone de cruz agradável
singe3
Eu usei a versão Javascript pura e funcionou bem, exceto para centralizar o botão no Win / Linux Firefox / Chrome. Resolvi isso removendo top:no período filho e definindo display: flex; align-items: center;no período pai.
thomasa88 19/06
157

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.

campo de entrada de pesquisa HTML5 simples

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

campo de entrada de pesquisa de autoinicialização

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".

Nick Sweeting
fonte
3
Excelente resposta, sem código envolvido. Infelizmente não é suportado por muitos navegadores .. Não importa, seria um recurso adicional Chrome no meu produto :)
guillaumepotier
48

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 .

ThorSummoner
fonte
4
Embora o tipo 'search' seja suportado por todos os navegadores recentes (verifique o suporte aqui: wufoo.com/html5), o botão Limpar não é mostrado no Firefox (32.0.3) ou no Opera (12.17).
Justanotherprogrammer 30/09/14
9
o botão Limpar também não é mostrado no Chrome mais recente
tsayen
3
Se você estiver usando o Bootstrap, ele poderá substituir o comportamento padrão
aexl
O CodePen vinculado está faltando a barra de fechamento na entrada; portanto, se você quiser vê-lo funcionar no CodePen, adicione a barra de fechamento.
Gen1-1
@ Gen1-1 opa, parece que os envios públicos estão desativados blog.codepen.io/2019/08/06/anonymous-pen-save-option-removed se alguém tiver uma caneta de código fixa, sinta-se à vontade para editar e ajudar a corrigir a demo
ThorSummoner 06/06
24

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/

wldaunfr
fonte
Isso é incrível, mas eu recomendaria adicionar "$ (window) .resize (function () {triggerBtn ()});" em jquery.clearsearch.js, logo após $ this.on ('keyup keydown change focus', triggerBtn); | De modo que as janelas de redimensionamento não errei a posição cruz
Ng Sek Longo
17

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;)

Tom
fonte
6

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>
Expandir snippet

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

Mahmoud Ali Kassem
fonte
3

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>
Expandir snippet

TechNyquist
fonte
1

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>
Expandir snippet

Mehran Shagerdi
fonte
Embora esse código possa fornecer uma solução para o problema do OP, é altamente recomendável que você forneça um contexto adicional sobre por que e / ou como esse código responde à pergunta. As respostas apenas ao código geralmente se tornam inúteis a longo prazo, porque os futuros espectadores com problemas semelhantes não conseguem entender o raciocínio por trás da solução.
E. Zeytinci
-1

@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>
Expandir snippet

Hiren
fonte