Ícone claro dentro do texto de entrada

Existe uma maneira rápida de criar um elemento de texto de entrada com um ícone à direita para limpar o próprio elemento de entrada (como a caixa de pesquisa do Google)?

Olhei em volta, mas só descobri como colocar um ícone como plano de fundo do elemento de entrada. Existe um plugin jQuery ou algo mais?

Eu quero o ícone dentro do elemento de entrada de texto, algo como:

--------------------------------------------------
|                                               X|
--------------------------------------------------

Adicione um type="search"a sua entrada
O suporte é bastante decente, mas não funcionará no IE <10

<input type="search">

Entrada limpa para navegadores antigos

Se você precisar de suporte ao IE9, aqui estão algumas soluções alternativas

Usando um padrão <input type="text">e alguns elementos HTML:

/**
 * Clearable text inputs
 */
$(".clearable").each(function() {
  
  var $inp = $(this).find("input:text"),
      $cle = $(this).find(".clearable__clear");

  $inp.on("input", function(){
    $cle.toggle(!!this.value);
  });
  
  $cle.on("touchstart click", function(e) {
    e.preventDefault();
    $inp.val("").trigger("input");
  });
  
});

/* Clearable text inputs */
.clearable{
  position: relative;
  display: inline-block;
}
.clearable input[type=text]{
  padding-right: 24px;
  width: 100%;
  box-sizing: border-box;
}
.clearable__clear{
  display: none;
  position: absolute;
  right:0; top:0;
  padding: 0 8px;
  font-style: normal;
  font-size: 1.2em;
  user-select: none;
  cursor: pointer;
}
.clearable input::-ms-clear {  /* Remove IE default X */
  display: none;
}

<span class="clearable">
  <input type="text" name="" value="" placeholder="">
  <i class="clearable__clear">&times;</i>
</span>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Usando apenas um <input class="clearable" type="text">(sem elementos adicionais)

defina class="clearable"e brinque com a imagem de fundo:

/**
 * Clearable text inputs
 */
function tog(v){return v?'addClass':'removeClass';} 
$(document).on('input', '.clearable', function(){
    $(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
}).on('touchstart click', '.onX', function( ev ){
    ev.preventDefault();
    $(this).removeClass('x onX').val('').change();
});

// $('.clearable').trigger("input");
// Uncomment the line above if you pre-fill values from LS or server

/* Clearable text inputs */
.clearable{
  background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center;
  border: 1px solid #999;
  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; }              /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */

<input class="clearable" type="text" name="" value="" placeholder="" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

demonstração do jsBin

O truque é definir o preenchimento certo (usei 18px) para inpute empurre a imagem de fundo para a direita, fora da vista (usei right -10px center).
Esse preenchimento de 18 pixels impedirá que o texto oculte embaixo do ícone (enquanto visível).
O jQ adicionará a classe x(se inputtiver valor) mostrando o ícone claro.
Agora tudo o que precisamos é direcionar com jQ as entradas com classe xe detectar mousemovese o mouse está dentro dessa área de 18px "x"; se estiver dentro, adicione a classe onX.
Clicar na onXclasse remove todas as classes, redefine o valor de entrada e oculta o ícone.

Gif 7x7px:

String Base64:

data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=

Eu poderia sugerir, se você concorda com isso, sendo limitado a navegadores compatíveis com html 5, basta usar:

<input type="search" />

Demonstração JS Fiddle

É certo que, no Chromium (Ubuntu 11.04), isso exige que haja texto dentro do inputelemento antes que a imagem / funcionalidade em texto não criptografado apareça.

Referência:

• Mergulhe no HTML 5: Uma forma de loucura .
• tipo de entrada = pesquisa - campo de pesquisa (NOVO) HTML5 .

Você pode usar um botão de redefinição com uma imagem ...

<form action="" method="get">
   <input type="text" name="search" required="required" placeholder="type here" />
   <input type="reset" value="" alt="clear" />
</form>

<style>
   input[type="text"]
   {
      height: 38px;
      font-size: 15pt;
   }

   input[type="text"]:invalid + input[type="reset"]{
     display: none;
   } 

   input[type="reset"]
   {
      background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
      background-position: center center;
      background-repeat: no-repeat;
      height: 38px;
      width: 38px;
      border: none;
      background-color: transparent;
      cursor: pointer;
      position: relative;
      top: -9px;
      left: -44px;
   }
</style>

Veja em ação aqui: http://jsbin.com/uloli3/63

Eu criei uma caixa de texto que pode ser limpa em apenas CSS. Não requer código javascript para fazê-lo funcionar

abaixo está o link de demonstração

http://codepen.io/shidhincr/pen/ICLBD

De acordo com o MDN , <input type="search" />atualmente é suportado em todos os navegadores modernos:

<input type="search" value="Clear this." />

No entanto, se você deseja um comportamento diferente e consistente entre os navegadores, aqui estão algumas alternativas leves que exigem apenas JavaScript:

Opção 1 - sempre exibir o 'x': (exemplo aqui)

Array.prototype.forEach.call(document.querySelectorAll('.clearable-input>[data-clear-input]'), function(el) {
  el.addEventListener('click', function(e) {
    e.target.previousElementSibling.value = '';
  });
});

.clearable-input {
  position: relative;
  display: inline-block;
}
.clearable-input > input {
  padding-right: 1.4em;
}
.clearable-input > [data-clear-input] {
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  font-size: 1.4em;
  padding: 0 0.2em;
  line-height: 1em;
  cursor: pointer;
}
.clearable-input > input::-ms-clear {
  display: none;
}

<p>Always display the 'x':</p>

<div class="clearable-input">
  <input type="text" />
  <span data-clear-input>&times;</span>
</div>

<div class="clearable-input">
  <input type="text" value="Clear this." />
  <span data-clear-input>&times;</span>
</div>

Opção 2 - Exibir apenas o 'x' ao passar o mouse sobre o campo: (exemplo aqui)

Array.prototype.forEach.call(document.querySelectorAll('.clearable-input>[data-clear-input]'), function(el) {
  el.addEventListener('click', function(e) {
    e.target.previousElementSibling.value = '';
  });
});

.clearable-input {
  position: relative;
  display: inline-block;
}
.clearable-input > input {
  padding-right: 1.4em;
}
.clearable-input:hover > [data-clear-input] {
  display: block;
}
.clearable-input > [data-clear-input] {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  font-size: 1.4em;
  padding: 0 0.2em;
  line-height: 1em;
  cursor: pointer;
}
.clearable-input > input::-ms-clear {
  display: none;
}

<p>Only display the 'x' when hovering over the field:</p>

<div class="clearable-input">
  <input type="text" />
  <span data-clear-input>&times;</span>
</div>

<div class="clearable-input">
  <input type="text" value="Clear this." />
  <span data-clear-input>&times;</span>
</div>

Opção 3 - Exiba apenas 'x' se o inputelemento tiver um valor: (exemplo aqui)

Array.prototype.forEach.call(document.querySelectorAll('.clearable-input'), function(el) {
  var input = el.querySelector('input');

  conditionallyHideClearIcon();
  input.addEventListener('input', conditionallyHideClearIcon);
  el.querySelector('[data-clear-input]').addEventListener('click', function(e) {
    input.value = '';
    conditionallyHideClearIcon();
  });

  function conditionallyHideClearIcon(e) {
    var target = (e && e.target) || input;
    target.nextElementSibling.style.display = target.value ? 'block' : 'none';
  }
});

.clearable-input {
  position: relative;
  display: inline-block;
}
.clearable-input > input {
  padding-right: 1.4em;
}
.clearable-input >[data-clear-input] {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  font-size: 1.4em;
  padding: 0 0.2em;
  line-height: 1em;
  cursor: pointer;
}
.clearable-input > input::-ms-clear {
  display: none;
}

<p>Only display the 'x' if the `input` element has a value:</p>

<div class="clearable-input">
  <input type="text" />
  <span data-clear-input>&times;</span>
</div>

<div class="clearable-input">
  <input type="text" value="Clear this." />
  <span data-clear-input>&times;</span>
</div>

Como nenhuma das soluções disponíveis atendeu a nossos requisitos, criamos um plugin simples do jQuery chamado jQuery-ClearSearch -

usá-lo é tão fácil quanto:

<input class="clearable" type="text" placeholder="search">

<script type="text/javascript">
    $('.clearable').clearSearch();
</script>

Exemplo: http://jsfiddle.net/wldaunfr/FERw3/

EDIT: Encontrei este link. Espero que ajude. http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

Você mencionou que deseja o item à direita do texto de entrada. Portanto, a melhor maneira seria criar uma imagem ao lado da caixa de entrada. Se você estiver procurando algo dentro da caixa, poderá usar a imagem de plano de fundo, mas talvez não seja capaz de escrever um script para limpar a caixa.

Então, insira e crie uma imagem e escreva um código JavaScript para limpar a caixa de texto.

Se você quiser como o Google, saiba que o "X" não está realmente dentro do <input>- eles estão próximos um do outro com o recipiente externo estilizado para aparecer como a caixa de texto.

HTML:

<form>
    <span class="x-input">
        <input type="text" class="x-input-text" />
        <input type="reset" />
    </span>
</form>

CSS:

.x-input {
    border: 1px solid #ccc;
}

.x-input input.x-input-text {
    border: 0;
    outline: 0;
}

Exemplo: http://jsfiddle.net/VTvNX/

Algo assim?? Jsfiddle Demo

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .searchinput{
    display:inline-block;vertical-align: bottom;
    width:30%;padding: 5px;padding-right:27px;border:1px solid #ccc;
        outline: none;
}
        .clearspace{width: 20px;display: inline-block;margin-left:-25px;
}
.clear {
    width: 20px;
    transition: max-width 0.3s;overflow: hidden;float: right;
    display: block;max-width: 0px;
}

.show {
    cursor: pointer;width: 20px;max-width:20px;
}
form{white-space: nowrap;}

    </style>
</head>
<body>
<form>
<input type="text" class="searchinput">
</form>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script> <script>
$(document).ready(function() {
$("input.searchinput").after('<span class="clearspace"><i class="clear" title="clear">&cross;</i></span>');
$("input.searchinput").on('keyup input',function(){
if ($(this).val()) {$(".clear").addClass("show");} else {$(".clear").removeClass("show");}
});
$('.clear').click(function(){
    $('input.searchinput').val('').focus();
    $(".clear").removeClass("show");
});
});
</script>
</body>
</html>

<form action="" method="get">
   <input type="text" name="search" required="required" placeholder="type here" />
   <input type="reset" value="" alt="clear" />
</form>

<style>
   input[type="text"]
   {
      height: 38px;
      font-size: 15pt;
   }

   input[type="text"]:invalid + input[type="reset"]{
     display: none;
   } 

   input[type="reset"]
   {
      background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
      background-position: center center;
      background-repeat: no-repeat;
      height: 38px;
      width: 38px;
      border: none;
      background-color: transparent;
      cursor: pointer;
      position: relative;
      top: -9px;
      left: -44px;
   }
</style>

Você pode fazer com estes comandos (sem o Bootstrap).

Array.from(document.querySelectorAll('.search-field')).forEach(field => {
  field.querySelector('span').addEventListener('click', e => {
    field.querySelector('input').value = '';
  });
});

:root {
  --theme-color: teal;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
}

div {
  position: relative;
}

input {
  background:none;
  outline:none;
  display: inline-block;
  width: 100%;
  margin: 8px 0;
  padding: 13px 15px;
  padding-right: 42.5px;
  border: 1px solid var(--theme-color);
  border-radius: 5px;
  box-sizing: border-box;
}

span {
  position: absolute;
  top: 0;
  right: 0;
  margin: 8px 0;
  padding: 13px 15px;
  color: var(--theme-color);
  font-weight: bold;
  cursor: pointer;
}
span:after {
  content: '\2716';
}

<div class="wrapper">
  <div class="search-field">
    <input placeholder="Search..." />
    <span></span>
  </div>
</div>

Aqui está um plugin jQuery (e uma demonstração no final).

http://jsfiddle.net/e4qhW/3/

Fiz isso principalmente para ilustrar um exemplo (e um desafio pessoal). Embora os votos positivos sejam bem-vindos, as outras respostas são bem dadas dentro do prazo e merecem o devido reconhecimento.

Ainda assim, na minha opinião, é um excesso de engenharia (a menos que faça parte de uma biblioteca de interface do usuário).

Eu escrevi um componente simples usando jQuery e bootstrap. Experimente: https://github.com/mahpour/bootstrap-input-clear-button

Usando um plugin jquery, eu o adaptei às minhas necessidades, adicionando opções personalizadas e criando um novo plugin. Você pode encontrá-lo aqui: https://github.com/david-dlc-cerezo/jquery-clearField

Um exemplo de uso simples:

<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<script src='src/jquery.clearField.js'></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/jquery.clearField.css">

<table>
    <tr>
        <td><input name="test1" id="test1" clas="test" type='text'></td>
        <td>Empty</td>
    </tr>
    <tr>
        <td><input name="test2" id="test2" clas="test" type='text' value='abc'></td>
        <td>Not empty</td>
    </tr>
</table>

<script>
    $('.test').clearField();
</script>

Obtendo algo parecido com isto:

O jQuery Mobile agora tem isso incorporado:

<input type="text" name="clear" id="clear-demo" value="" data-clear-btn="true">

Documentos do TextInput da API do Jquery Mobile

Não há necessidade de incluir arquivos de imagem ou CSS. Não é necessário incluir toda a biblioteca de UI do jQuery para artilharia pesada. Eu escrevi um plugin jQuery leve que faz a mágica para você. Tudo que você precisa é jQuerye o plugin . =)

Brinque aqui: demonstração do jQuery InputSearch .