webentwicklung-frage-antwort-db.com.de

Symbol im Eingabetext löschen

Gibt es eine schnelle Möglichkeit, ein Eingabetextelement mit einem Symbol rechts zu erstellen, um das Eingabeelement selbst zu löschen (z. B. das Google-Suchfeld)?

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

Ich möchte das Symbol im Eingabetextelement haben, etwa so:

--------------------------------------------------
|                                               X|
--------------------------------------------------
161

Fügen Sie Ihrer Eingabe einen type="search" Hinzu
Der Support ist ziemlich anständig, funktioniert aber 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

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

Verwendung nur eines <input class="clearable" type="text"> (Keine zusätzlichen Elemente)

Clear icon inside input element

setze einen 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, ein rechtes Auffüllen (ich habe 18 Pixel verwendet) für input festzulegen und das Hintergrundbild nach rechts außer Sicht zu schieben (ich habe right -10px center Verwendet).
Dieser 18px-Abstand verhindert, dass sich der Text unter dem Symbol versteckt (solange er sichtbar ist).
jQ fügt die Klasse x hinzu (wenn input einen Wert hat) und zeigt das Löschsymbol an.
Jetzt müssen wir nur noch mit jQ die Eingaben mit der Klasse x anvisieren und auf mousemove feststellen, ob sich die Maus in diesem 18px "x" -Bereich befindet; Wenn drin, füge die Klasse onX hinzu.
Durch Klicken auf die Klasse onX werden alle Klassen entfernt, der Eingabewert zurückgesetzt und das Symbol ausgeblendet.


7x7px gif: Clear icon 7x7

Base64-Zeichenfolge:

data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=
301
Roko C. Buljan

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:

60
David Thomas

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

26
KOGI

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

24
Shidhin Cr

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

input type=search

<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>
20
Josh Crozier

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/

9
wldaunfr

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/

3

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.

3
Jaspero
<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>
1
Juboraj Sarker

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

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

0
Ehsan Mahpour

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

0
Christian

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

0
user2217751

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:

enter image description here

0
David

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

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. =)

jQuery InputSearch sneak peek

Hier fummeln: jQuery InputSearch-Demo.

0
Glenn Mohammad