Icono claro dentro del texto de entrada

¿Hay una forma rápida de crear un elemento de texto de entrada con un icono a la derecha para borrar el elemento de entrada en sí (como el cuadro de búsqueda de Google)?

Miré a mi alrededor pero solo encontré cómo poner un ícono como fondo del elemento de entrada. ¿Hay un complemento jQuery o algo más?

Quiero el icono dentro del elemento de texto de entrada, algo como:

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

Agregue un type="search"a su entrada
El soporte es bastante decente pero no funcionará en IE <10

<input type="search">

Entrada limpiable para navegadores antiguos

Si necesita soporte para IE9 aquí hay algunas soluciones

Usando un estándar <input type="text">y algunos 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 solo un <input class="clearable" type="text">(Sin elementos adicionales)

establece class="clearable"y juega con su imagen de fondo:

/**
 * 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>

jsBin demo

El truco consiste en colocar algo de relleno derecho (usé 18px) inputy empujar la imagen de fondo hacia la derecha, fuera de la vista (solía right -10px center).
Ese relleno de 18px evitará que el texto se oculte debajo del icono (mientras esté visible).
jQ agregará la clase x(si inputtiene valor) mostrando el ícono clear.
Ahora todo lo que necesitamos es apuntar con jQ las entradas con clase xy detectar mousemovesi el mouse está dentro de esa área "x" de 18px; si está adentro, agregue la clase onX.
Al hacer clic en la onXclase, se eliminan todas las clases, se restablece el valor de entrada y se oculta el icono.

7x7px gif:

Cadena Base64:

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

Podría sugerir, si está de acuerdo con que esto se limite a los navegadores compatibles con html 5, simplemente use:

<input type="search" />

Demostración de JS Fiddle

Es cierto que en Chromium (Ubuntu 11.04), esto requiere que haya texto dentro del inputelemento antes de que aparezca la imagen / funcionalidad de texto claro.

Referencia:

• Sumérgete en HTML 5: una forma de locura .
• input type = search - campo de búsqueda (NUEVO) HTML5 .

Podría usar un botón de reinicio diseñado con una imagen ...

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

Véalo en acción aquí: http://jsbin.com/uloli3/63

He creado un cuadro de texto limpiable en solo CSS. No requiere código javascript para que funcione

a continuación se muestra el enlace de demostración

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

Según MDN , <input type="search" />actualmente es compatible con todos los navegadores modernos:

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

Sin embargo, si desea un comportamiento diferente que sea consistente en todos los navegadores, aquí hay algunas alternativas livianas que solo requieren JavaScript:

Opción 1 - Mostrar siempre la 'x': (ejemplo aquí)

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>

Opción 2: solo muestra la 'x' al pasar el cursor sobre el campo: (ejemplo aquí)

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>

Opción 3: solo muestre la 'x' si el inputelemento tiene un valor: (ejemplo aquí)

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>

Dado que ninguna de las soluciones que vuelan realmente cumplió con nuestros requisitos, se nos ocurrió un simple complemento jQuery llamado jQuery-ClearSearch :

usarlo es tan fácil como:

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

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

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

EDITAR: Encontré este enlace. Espero eso ayude. http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

Has mencionado que lo quieres a la derecha del texto de entrada. Entonces, la mejor manera sería crear una imagen al lado del cuadro de entrada. Si está buscando algo dentro del cuadro, puede usar la imagen de fondo, pero es posible que no pueda escribir un guión para borrar el cuadro.

Por lo tanto, inserte una imagen y escriba un código JavaScript para borrar el cuadro de texto.

Si quiere que sea como Google, entonces debe saber que la "X" no está realmente dentro de <input>ellos, están uno al lado del otro con el contenedor exterior diseñado para aparecer como el cuadro 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;
}

Ejemplo: http://jsfiddle.net/VTvNX/

¿¿Algo como esto?? 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>

Puedes hacerlo con estos comandos (sin 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>

Aquí hay un complemento jQuery (y una demostración al final).

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

Lo hice principalmente para ilustrar un ejemplo (y un desafío personal). Aunque los votos positivos son bienvenidos, las otras respuestas se entregan a tiempo y merecen su debido reconocimiento.

Aún así, en mi opinión, está sobredimensionado (a menos que forme parte de una biblioteca de IU).

He escrito un componente simple usando jQuery y bootstrap. Pruébalo: https://github.com/mahpour/bootstrap-input-clear-button

Utilizando un complemento jquery, lo he adaptado a mis necesidades agregando opciones personalizadas y creando un nuevo complemento. Puede encontrarlo aquí: https://github.com/david-dlc-cerezo/jquery-clearField

Un ejemplo de un uso simple:

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

Obteniendo algo como esto:

jQuery Mobile ahora tiene esto incorporado:

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

Documentos de Jquery Mobile API TextInput

No es necesario incluir CSS o archivos de imagen. No es necesario incluir toda esa biblioteca jQuery UI de artillería pesada. Escribí un plugin jQuery liviano que hace la magia por ti. Todo lo que necesitas es jQueryy el complemento . =)

Violín aquí: jQuery InputSearch demo .