Symbol im Eingabetext löschen

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 input -Element vor dem Klartext-Bild befindet/Funktionalität wird angezeigt.

Referenz:

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

Sie könnten eine Reset-Taste verwenden, die mit einem Bild versehen 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/6

Ich habe ein übersichtliches 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 gleich ist, finden Sie hier einige einfache 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 den Mauszeiger über das Feld halten: (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 input -Element 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 Bedienung ist so einfach wie:

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

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

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

Wenn du es wie Google haben willst, solltest du wissen, dass das "X" nicht im <input> - Sie stehen 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/

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 neben dem Eingabetext haben möchten. Am besten erstellen Sie also ein Bild neben dem Eingabefeld. 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 ein Bild ein und schreiben Sie einen JavaScript-Code, um das Textfeld zu löschen.

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

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>

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

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. Auch wenn positive Bewertungen erwünscht sind, werden die anderen Antworten pünktlich und gebührend gewürdigt.

Meiner Meinung nach ist es jedoch überentwickelt (es sei denn, es ist Teil einer UI-Bibliothek).

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

Verwenden eines JQuery-Plugins Ich habe es an meine Bedürfnisse angepasst, indem ich benutzerdefinierte 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 bekommen:

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

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 teal;
  border-radius: 5px;
  box-sizing: border-box;
}

span {
  position: absolute;
  top: 0;
  right: 0;
  margin: 8px 0;
  padding: 13px 15px;
  
  color: teal;
  font-weight: bold;
  cursor: pointer;
}

<div>
  <input placeholder="Prueba" />
  <span>&#x2716;</span>
</div>

Es müssen keine CSS- oder Bilddateien hinzugefügt werden. 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 jQuery und das Plugin. =)

Hier fummeln: jQuery InputSearch-Demo.