Wie lösche ich ein Suchfeld mit einem 'x' in Bootstrap 3?

93

Wenn Sie Probleme mit dem Bootstrap haben, wäre eine Hilfe großartig. Vielen Dank

Was ich möchte: (oberer Teil)

Geben Sie hier die Bildbeschreibung ein

Mein aktueller Code:

<div class="form-group">
    <input type="text" 
           class="form-control" 
           id="findJobTitle" 
           name="findJobTitle" 
           placeholder="Job Title, Keywords" 
           onkeyup="showResult()"> 
</div>

Aktueller Screenshot:

Geben Sie hier die Bildbeschreibung ein

K2SO Ghost Spirit
quelle

Antworten:

208

Um so etwas zu bekommen

Eingabe mit Löschtaste

Verwenden Sie mit Bootstrap 3 und Jquery den folgenden HTML-Code:

<div class="btn-group">
  <input id="searchinput" type="search" class="form-control">
  <span id="searchclear" class="glyphicon glyphicon-remove-circle"></span>
</div>

und etwas CSS:

#searchinput {
    width: 200px;
}
#searchclear {
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #ccc;
}

und Javascript:

$("#searchclear").click(function(){
    $("#searchinput").val('');
});

Natürlich müssen Sie mehr Javascript für die von Ihnen benötigten Funktionen schreiben, z. B. um das 'x' auszublenden, wenn die Eingabe leer ist, Ajax-Anfragen zu stellen und so weiter. Siehe http://www.bootply.com/121508

nicht verdrahtet
quelle
4
Wenn man Plunker gegenüber Bootply bevorzugt, ist es hier: plnkr.co/edit/c2710u?p=preview
tanguy_k
2
Unter dem Gesichtspunkt der Barrierefreiheit wäre es besser, wenn die #searchclearSpanne eine Schaltfläche wäre. Es ist ein interaktives Element, markieren Sie es also als interaktives Element. Derzeit können Benutzer, die sich auf die Tastaturnavigation verlassen, nicht auf die Suchspanne zugreifen, und sie wird von unterstützenden Technologien (z. B. Bildschirmlesegeräten) nicht leicht erkannt
Ian Dickinson,
3
Ich habe gerade versucht, dies zu beheben, falls Sie diese Eingabe inline mit anderen Elementen (wie Addons, Dropdowns usw.) verwenden. Entfernen Sie einfach die Klasse des Wrapping-Div, setzen Sie sie auf position: relativeund passen Sie dann #searchclear mit an z-index: 10; top: 10pxund entfernen Siebottom: 0
RecuencoJones
Ist es nicht ein Widerspruch, oben, unten und oben zu sein?
Nafg
89

Supereinfache HTML 5-Lösung:

<input type="search" placeholder="Search..." />

Quelle: HTML 5 Tutorial - Eingabetyp: Suche

Dies funktioniert mindestens in Chrome 8, Edge 14, IE 10 und Safari 5 und erfordert weder Bootstrap noch eine andere Bibliothek. (Leider scheint Firefox die Schaltfläche zum Löschen der Suche noch nicht zu unterstützen.)

Nach Eingabe des Suchfelds wird ein 'x' angezeigt, auf das geklickt werden kann, um den Text zu löschen. Dies funktioniert weiterhin wie ein normales Bearbeitungsfeld (ohne die Schaltfläche 'x') in anderen Browsern, z. B. Firefox, sodass Firefox-Benutzer stattdessen den Text auswählen und Löschen drücken können oder ...

Wenn Sie diese nette Funktion wirklich benötigen, die in Firefox unterstützt wird, können Sie eine der anderen hier veröffentlichten Lösungen als Polyfüllung für Eingabeelemente [Typ = Suche] implementieren. Eine Polyfüllung ist Code, der automatisch eine Standardbrowserfunktion hinzufügt, wenn der Browser des Benutzers die Funktion nicht unterstützt. Mit der Zeit besteht die Hoffnung, dass Sie Polyfills entfernen können, wenn Browser die entsprechenden Funktionen implementieren. In jedem Fall kann eine Polyfill-Implementierung dazu beitragen, den HTML-Code sauberer zu halten.

Übrigens werden auch andere HTML 5-Eingabetypen (wie "Datum", "Nummer", "E-Mail" usw.) ordnungsgemäß in ein einfaches Bearbeitungsfeld umgewandelt. Einige Browser bieten Ihnen möglicherweise eine ausgefallene Datumsauswahl, eine Drehfeldsteuerung mit Auf- / Ab-Tasten oder (auf Mobiltelefonen) eine spezielle Tastatur mit dem @ -Zeichen und einer .com-Taste, aber meines Wissens alle Browser werden mindestens ein einfaches Textfeld für jeden nicht erkannten Eingabetyp an.


Bootstrap 3 & HTML 5 Lösung

Bootstrap 3 setzt viel CSS zurück und unterbricht die Schaltfläche zum Abbrechen der HTML 5-Suche. Nachdem das Bootstrap 3-CSS geladen wurde, können Sie die Schaltfläche zum Abbrechen der Suche mit dem im folgenden Beispiel verwendeten CSS wiederherstellen:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
  }
</style>
<div class="form-inline">
  <input type="search" placeholder="Search..." class="form-control" />
</div>

Quelle: HTML 5 Search Input funktioniert nicht mit Bootstrap

Ich habe getestet, dass diese Lösung in den neuesten Versionen von Chrome, Edge und Internet Explorer funktioniert. Ich kann nicht in Safari testen. Leider wird die Schaltfläche 'x' zum Löschen der Suche in Firefox nicht angezeigt. Wie oben könnte jedoch eine Polyfüllung für Browser implementiert werden, die diese Funktion nicht nativ unterstützen (z. B. Firefox).

YipYip
quelle
2
FWIW: Ich glaube nicht, dass dies in Chrome mehr funktioniert. Vielleicht nicht mehr Teil der offiziellen CSS-Spezifikation? W3Schools sagt, "ein Suchfeld verhält sich wie ein normales Textfeld" und MDN erwähnt diese Funktionalität nicht. MDN sagt, dass es neue Zeilen entfernen wird, aber das war es auch schon für diesen Eingabetyp.
KyleFarris
3
@KyleFarris Beide oben genannten Methoden funktionieren in Chrome Version 58.0.3029.110 (64-Bit) noch für mich. Sie müssen etwas in das Suchfeld eingeben, bevor die Schaltfläche zum Löschen angezeigt wird.
YipYip
Wie behebt diese überbewertete Antwort das OP-Problem, indem im Textfeld eine Schaltfläche zum Löschen angezeigt wird, mit der der Inhalt gelöscht wird?
usr-local-ΕΨΗΕΛΩΝ
2
Es ist keine supereinfache Lösung, wenn sie nicht in allen gängigen Browsern funktioniert.
Thelem
1
@ AnandUndavia Danke, dass du das gemeldet hast. Ich habe meine Antwort aktualisiert, um "Bootstrap 3" anzugeben. Dies wurde vom OP verwendet, als die Frage gestellt wurde (bereits 2013). Ich werde prüfen, ob meine Antwort für Bootstrap 4 funktioniert, wenn ich Zeit habe.
YipYip
23

Ich habe versucht, zu viel benutzerdefiniertes CSS zu vermeiden, und nachdem ich einige andere Beispiele gelesen hatte, habe ich die Ideen dort zusammengeführt und diese Lösung erhalten:

<div class="form-group has-feedback has-clear">
    <input type="text" class="form-control" ng-model="ctrl.searchService.searchTerm" ng-change="ctrl.search()" placeholder="Suche"/>
    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" ng-click="ctrl.clearSearch()" style="pointer-events: auto; text-decoration: none;cursor: pointer;"></a>
</div>

Da ich kein BootScript-JavaScript verwende, sondern nur das CSS zusammen mit Angular, benötige ich nicht die Klassen has-clear und form-control-clear, und ich habe die clear-Funktion in meinem AngularJS-Controller implementiert. Mit dem JavaScript von Bootstrap ist dies möglicherweise ohne eigenes JavaScript möglich.

Paul Wellner Bou
quelle
1
Sie können der X-Schaltfläche auch ein ng-hide hinzufügen, um sie nicht zu sehen, wenn die Eingabe leer ist.
Jrvidotti
für den klaren Knopf ng-click="ctrl.searchService.searchTerm = null"undng-show="ctrl.searchService.searchTerm"
Adrian
18

Vielen Dank, dass Ihre Lösung sehr sauber war. Ich habe horizontale Bootstrap-Formulare verwendet und einige Änderungen vorgenommen, um einen einzelnen Handler und Formular-CSS zu ermöglichen.

html: - AKTUALISIERT , um Bootstraps Has -Feedback und Form-Control-Feedback zu verwenden

 <div class="container">
  <form class="form-horizontal">
   <div class="form-group has-feedback">
    <label for="txt1" class="col-sm-2 control-label">Label 1</label>
    <div class="col-sm-10">
     <input id="txt1" type="text" class="form-control hasclear" placeholder="Textbox 1">
     <span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>
    </div>
   </div>
   <div class="form-group has-feedback">
    <label for="txt2" class="col-sm-2 control-label">Label 2</label>
    <div class="col-sm-10">
      <input id="txt2" type="text" class="form-control hasclear" placeholder="Textbox 2">
      <span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>
    </div>
   </div>
   <div class="form-group has-feedback">
    <label for="txt3" class="col-sm-2 control-label">Label 3</label>
    <div class="col-sm-10">
     <input id="txt3" type="text" class="form-control hasclear" placeholder="Textbox 3">
     <span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>
    </div>   
   </div>
  </form>
 </div>

Javascript:

$(".hasclear").keyup(function () {
    var t = $(this);
    t.next('span').toggle(Boolean(t.val()));
});
$(".clearer").hide($(this).prev('input').val());
$(".clearer").click(function () {
    $(this).prev('input').val('').focus();
    $(this).hide();
});

Beispiel: http://www.bootply.com/130682

LDAdams
quelle
8
Nach dem Bootstrap v3.3.0 müssen Sie die Zeigerereignisse von none auf auto setzen, da Sie sonst nicht auf das Feedback zur Formularsteuerung klicken können.
Vizjerai
Was macht $(".clearer").hide($(this).prev('input').val());das Kann es nicht einfach sein $(".clearer").hide();?
Jim Buck
Ich nehme an, seine Absicht war es, einen wahrheitsgemäßen Parameter an hide () zu übergeben, um versteckt / angezeigt zu starten, basierend darauf, ob die Eingabe bereits einen Wert hat. Wenn das die Absicht war, scheiterte er (verstecken versteckt sich immer). Es sollte sein$(".clearer").toggle(!!$(this).prev('input').val());
Jeff Shepler
15

AngularJS / UI-Bootstrap Antwort

  • Verwenden Sie die Has -Feedback- Klasse von Bootstrap , um ein Symbol im Eingabefeld anzuzeigen.
  • Stellen Sie sicher, dass das Symbol hat style="cursor: pointer; pointer-events: all;"
  • Verwenden Sie ng-clickdiese Option , um den Text zu löschen.

JavaScript (app.js)

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {

  $scope.params = {};

  $scope.clearText = function() {
    $scope.params.text = null;
  }

});

HTML (index.html Snippet)

      <div class="form-group has-feedback">
        <label>text box</label>
        <input type="text"
               ng-model="params.text"
               class="form-control"
               placeholder="type something here...">
        <span ng-if="params.text"
              ng-click="clearText()"
              class="glyphicon glyphicon-remove form-control-feedback" 
              style="cursor: pointer; pointer-events: all;"
              uib-tooltip="clear">
        </span>
      </div>

Hier ist der Plunker: http://plnkr.co/edit/av9VFw?p=preview

Derek Soike
quelle
1

Machen Sie es mit Inline-Stilen und Skripten:

<div class="btn-group has-feedback has-clear">
    <input id="searchinput" type="search" class="form-control" style="width:200px;">
        <a 
id="searchclear" 
class="glyphicon glyphicon-remove-circle form-control-feedback form-control-clear" 
style="pointer-events:auto; text-decoration:none; cursor:pointer;"
onclick="$(this).prev('input').val('');return false;">
</a>
</div>
Denis Sivzov
quelle
1

Hier ist meine Arbeitslösung mit Suche und klarem Symbol für Angularjs \ Bootstrap mit CSS.

    <div class="form-group has-feedback has-clear">
                    <input type="search" class="form-control removeXicon" ng-model="filter" style="max-width:100%" placeholder="Search..." />
                    <div ng-switch on="!!filter">
                        <div ng-switch-when="false">
                            <span class="glyphicon glyphicon-search form-control-feedback"></span>
                        </div>
                        <div ng-switch-when="true">
                            <span class="glyphicon glyphicon-remove-sign form-control-feedback" ng-click="$parent.filter = ''" style="pointer-events: auto; text-decoration: none;cursor: pointer;"></span>
                        </div>
                    </div>                        
                </div>

------

CSS

/* hide the built-in IE10+ clear field icon */
.removeXicon::-ms-clear {
  display: none;
}

/* hide the built-in chrome clear field icon */
.removeXicon::-webkit-search-decoration,
.removeXicon::-webkit-search-cancel-button,
.removeXicon::-webkit-search-results-button,
.removeXicon::-webkit-search-results-decoration { 
      display: none; 
}
PavanT
quelle
1

Nicht an Element-ID binden, sondern nur das 'vorherige' Eingabeelement zum Löschen verwenden.

CSS:

.clear-input > span {
    position: absolute;
    right: 24px;
    top: 10px;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #AAA;
}

Javascript:

function $(document).ready(function() {
    $(".clear-input>span").click(function(){
        // Clear the input field before this clear button
        // and give it focus.

        $(this).prev().val('').focus();
    });
});

Verwenden Sie HTML Markup so oft Sie möchten:

<div class="clear-input">
    Pizza: <input type="text" class="form-control">
    <span class="glyphicon glyphicon-remove-circle"></span>
</div>

<div class="clear-input">
    Pasta: <input type="text" class="form-control">
    <span class="glyphicon glyphicon-remove-circle"></span>
</div>
Pizzamonster
quelle
-7

Platzieren Sie das Bild (Abbruch-Symbol) mit der absoluten Position, passen Sie die Eigenschaften oben und links an und rufen Sie die Methode onclick event auf, um das Eingabefeld zu löschen.

<div class="form-control">
    <input type="text" id="inputField" />
</div>
<span id="iconSpan"><img src="icon.png" onclick="clearInputField()"/></span>

In CSS-Position die Spanne entsprechend,

#iconSpan {
 position : absolute;
 top:1%;
 left :14%;
}
code2use
quelle