Icona chiara all'interno del testo di input

Esiste un modo rapido per creare un elemento di testo di input con un'icona a destra per cancellare l'elemento di input stesso (come la casella di ricerca di Google)?

Mi sono guardato intorno ma ho trovato solo come mettere un'icona come sfondo dell'elemento di input. Esiste un plugin jQuery o qualcos'altro?

Voglio l'icona all'interno dell'elemento di testo di input, qualcosa del tipo:

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

Aggiungi a type="search"al tuo input
Il supporto è abbastanza decente ma non funzionerà in IE <10

<input type="search">

Input clearable per vecchi browser

Se hai bisogno del supporto IE9 qui ci sono alcune soluzioni alternative

Utilizzando uno standard <input type="text">e alcuni elementi 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>

Utilizzando solo un <input class="clearable" type="text">(Nessun elemento aggiuntivo)

imposta a class="clearable"e gioca con la sua immagine di sfondo:

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

demo di jsBin

Il trucco è impostare un padding giusto (ho usato 18px) inpute spingere l'immagine di sfondo a destra, fuori dalla vista (ho usato right -10px center).
Quell'imbottitura 18px eviterà che il testo si nasconda sotto l'icona (mentre è visibile).
jQ aggiungerà la classe x(se inputha valore) mostrando l'icona di cancellazione.
Ora tutto ciò di cui abbiamo bisogno è indirizzare con jQ gli input con classe xe rilevare mousemovese il mouse è all'interno di quell'area "x" 18px; se all'interno, aggiungi la classe onX.
Fare clic sulla onXclasse rimuove tutte le classi, reimposta il valore di input e nasconde l'icona.

7x7px gif:

Stringa Base64:

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

Potrei suggerire, se sei d'accordo con questo essere limitato a browser compatibili con HTML 5, semplicemente usando:

<input type="search" />

Demo di JS Fiddle

Certo, in Chromium (Ubuntu 11.04), ciò richiede che ci sia del testo all'interno inputdell'elemento prima che appaia l'immagine / funzionalità in chiaro.

Riferimento:

• Immergiti in HTML 5: una forma di follia .
• input type = search - campo di ricerca (NUOVO) HTML5 .

È possibile utilizzare un pulsante di ripristino in stile con un'immagine ...

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

Guardalo in azione qui: http://jsbin.com/uloli3/63

Ho creato una casella di testo clearable solo in CSS. Non richiede alcun codice JavaScript per farlo funzionare

di seguito è riportato il link demo

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

Secondo MDN , <input type="search" />è attualmente supportato in tutti i browser moderni:

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

Tuttavia, se desideri comportamenti diversi e coerenti tra i browser, ecco alcune alternative leggere che richiedono solo JavaScript:

Opzione 1 - Visualizza sempre la 'x': (esempio qui)

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>

Opzione 2 - Visualizza la 'x' solo quando passi con il mouse sopra il campo: (esempio qui)

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>

Opzione 3 - Visualizza la 'x' solo se l' inputelemento ha un valore: (esempio qui)

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>

Poiché nessuna delle soluzioni che volano in giro ha veramente soddisfatto i nostri requisiti, abbiamo creato un semplice plug -in jQuery chiamato jQuery-ClearSearch -

usarlo è facile come:

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

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

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

EDIT: ho trovato questo link. Spero che sia d'aiuto. http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

Hai detto che lo vuoi a destra del testo di input. Quindi, il modo migliore sarebbe quello di creare un'immagine accanto alla casella di input. Se stai cercando qualcosa all'interno della scatola, puoi usare l'immagine di sfondo ma potresti non essere in grado di scrivere uno script per cancellare la scatola.

Quindi, inserire e immagine e scrivere un codice JavaScript per cancellare la casella di testo.

Se lo desideri come Google, dovresti sapere che la "X" non è effettivamente all'interno della <input>- sono uno accanto all'altro con il contenitore esterno in stile per apparire come la casella di testo.

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

Esempio: http://jsfiddle.net/VTvNX/

Qualcosa come questo?? 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>

Puoi farlo con questi comandi (senza 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>

Ecco un plugin jQuery (e una demo alla fine).

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

L'ho fatto principalmente per illustrare un esempio (e una sfida personale). Sebbene i voti positivi siano ben accetti, le altre risposte sono ben distribuite in tempo e meritano il loro giusto riconoscimento.

Tuttavia, a mio avviso, è eccessivamente ingegnerizzato (a meno che non faccia parte di una libreria UI).

Ho scritto un componente semplice usando jQuery e bootstrap. Provalo: https://github.com/mahpour/bootstrap-input-clear-button

Usando un plugin jquery l'ho adattato alle mie esigenze aggiungendo opzioni personalizzate e creando un nuovo plugin. Puoi trovarlo qui: https://github.com/david-dlc-cerezo/jquery-clearField

Un esempio di un semplice utilizzo:

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

Ottenere qualcosa del genere:

jQuery Mobile ora ha questo integrato:

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

Documenti TextInput dell'API Mobile di Jquery

Non è necessario includere file CSS o di immagine. Non è necessario includere l'intera libreria dell'interfaccia utente jQuery di artiglieria pesante. Ho scritto un plugin jQuery leggero che fa la magia per te. Tutto ciò che serve è jQuerye il plug-in . =)

Fiddle qui: demo di jQuery InputSearch .