Symbol im Eingabetext löschen

Gibt es eine schnelle Möglichkeit, ein Eingabetextelement mit einem Symbol auf der rechten Seite zu erstellen, um das Eingabeelement selbst zu löschen (wie das Google-Suchfeld)?

Ich habe mich umgesehen, aber nur herausgefunden, wie ein Symbol als Hintergrund für das Eingabeelement eingefügt werden kann. Gibt es ein jQuery-Plugin oder etwas anderes?

Ich möchte das Symbol im Eingabetextelement, etwa:

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

Fügen Sie type="search"Ihrer Eingabe ein hinzu.
Die Unterstützung ist recht anständig, funktioniert jedoch nicht in IE <10

<input type="search">

Löschbare Eingabe für alte Browser

Wenn Sie IE9-Unterstützung benötigen, finden Sie hier einige Problemumgehungen

Verwenden eines Standards <input type="text">und einiger HTML-Elemente:

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

Verwenden Sie nur ein <input class="clearable" type="text">(keine zusätzlichen Elemente)

setze a class="clearable"und spiele mit dem Hintergrundbild:

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

Der Trick besteht darin, eine richtige Polsterung (ich habe 18px verwendet) auf die zu setzen inputund das Hintergrundbild nach rechts zu schieben, außer Sichtweite (ich habe verwendet right -10px center).
Diese 18-Pixel-Auffüllung verhindert, dass sich der Text unter dem Symbol versteckt (solange er sichtbar ist).
jQ fügt die Klasse x(falls vorhanden input) mit dem Löschsymbol hinzu .
Jetzt müssen wir nur noch mit jQ auf die Eingaben mit class zielen xund erkennen, mousemoveob sich die Maus in diesem 18px "x" -Bereich befindet. Wenn drinnen, füge die Klasse hinzu onX.
Durch Klicken auf die onXKlasse werden alle Klassen entfernt, der Eingabewert zurückgesetzt und das Symbol ausgeblendet.

7x7px gif:

Base64-Zeichenfolge:

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

Könnte ich vorschlagen, wenn Sie damit einverstanden sind, dass dies auf HTML 5-kompatible Browser beschränkt ist, verwenden Sie einfach:

<input type="search" />

JS Fiddle Demo

Zugegebenermaßen erfordert dies in Chromium (Ubuntu 11.04), dass sich Text im inputElement befindet, bevor das Klartextbild / die Klartextfunktionalität angezeigt wird.

Referenz:

• Tauchen Sie ein in HTML 5: Eine Form des Wahnsinns .
• Eingabetyp = Suche - Suchfeld (NEU) HTML5 .

Sie können eine Reset-Taste verwenden, die mit einem Bild gestaltet ist ...

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

Sehen Sie es hier in Aktion: http://jsbin.com/uloli3/63

Ich habe ein löschbares Textfeld nur in CSS erstellt. Es ist kein Javascript-Code erforderlich, damit es funktioniert

Unten ist der Demo-Link

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

Nach MDN , <input type="search" />wird derzeit in allen modernen Browsern unterstützt:

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

Wenn Sie jedoch ein anderes Verhalten wünschen, das für alle Browser konsistent ist, finden Sie hier einige leichte Alternativen, für die nur JavaScript erforderlich ist:

Option 1 - Immer das 'x' anzeigen: (Beispiel hier)

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>

Option 2 - Zeigen Sie das 'x' nur an, wenn Sie mit der Maus über das Feld fahren: (Beispiel hier)

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>

Option 3 - Zeigen Sie das 'x' nur an, wenn das inputElement einen Wert hat: (Beispiel hier)

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>

Da keine der herumfliegenden Lösungen wirklich unseren Anforderungen entsprach, haben wir ein einfaches jQuery-Plugin namens jQuery-ClearSearch entwickelt -

Die Verwendung ist so einfach wie:

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

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

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

EDIT: Ich habe diesen Link gefunden. Ich hoffe es hilft. http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

Sie haben erwähnt, dass Sie es rechts vom Eingabetext möchten. Der beste Weg wäre also, ein Bild neben dem Eingabefeld zu erstellen. Wenn Sie etwas in der Box suchen, können Sie ein Hintergrundbild verwenden, aber möglicherweise kein Skript schreiben, um die Box zu löschen.

Fügen Sie also einen JavaScript-Code ein, schreiben Sie ein Bild und schreiben Sie es, um das Textfeld zu löschen.

Wenn Sie es wie Google möchten, sollten Sie wissen, dass sich das "X" nicht im Inneren befindet <input>- sie befinden sich nebeneinander, wobei der äußere Container so gestaltet ist, dass er wie das Textfeld aussieht.

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

Beispiel: http://jsfiddle.net/VTvNX/

Etwas wie das?? 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>

Sie können mit diesen Befehlen (ohne Bootstrap) tun.

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>

Hier ist ein jQuery-Plugin (und eine Demo am Ende).

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

Ich habe es hauptsächlich getan, um ein Beispiel (und eine persönliche Herausforderung) zu veranschaulichen. Obwohl positive Stimmen willkommen sind, werden die anderen Antworten rechtzeitig verteilt und verdienen ihre gebührende Anerkennung.

Meiner Meinung nach ist es jedoch ein überentwickeltes Aufblähen (es sei denn, es ist Teil einer UI-Bibliothek).

Ich habe eine einfache Komponente mit jQuery und Bootstrap geschrieben. Probieren Sie es aus: https://github.com/mahpour/bootstrap-input-clear-button

Mit einem jquery-Plugin habe ich es an meine Bedürfnisse angepasst, indem ich angepasste Optionen hinzugefügt und ein neues Plugin erstellt habe. Sie finden es hier: https://github.com/david-dlc-cerezo/jquery-clearField

Ein Beispiel für eine einfache Verwendung:

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

So etwas erhalten:

In jQuery Mobile ist jetzt Folgendes integriert:

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

Jquery Mobile API TextInput-Dokumente

Keine Notwendigkeit, CSS oder Bilddateien einzuschließen. Es ist nicht erforderlich, die gesamte jQuery-UI-Bibliothek für schwere Artillerie einzuschließen. Ich habe ein leichtes jQuery-Plugin geschrieben, das die Magie für Sie erledigt. Alles was Sie brauchen ist jQueryund das Plugin . =)

Geige hier: jQuery InputSearch-Demo .