Wenn Sie Probleme mit dem Bootstrap haben, wäre eine Hilfe großartig. Vielen Dank
Was ich möchte: (oberer Teil)
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:
twitter-bootstrap
twitter-bootstrap-3
K2SO Ghost Spirit
quelle
quelle
#searchclear
Spanne 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 erkanntposition: relative
und passen Sie dann #searchclear mit anz-index: 10; top: 10px
und entfernen Siebottom: 0
Supereinfache HTML 5-Lösung:
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:
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).
quelle
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:
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.
quelle
ng-click="ctrl.searchService.searchTerm = null"
undng-show="ctrl.searchService.searchTerm"
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
Javascript:
Beispiel: http://www.bootply.com/130682
quelle
$(".clearer").hide($(this).prev('input').val());
das Kann es nicht einfach sein$(".clearer").hide();
?$(".clearer").toggle(!!$(this).prev('input').val());
AngularJS / UI-Bootstrap Antwort
style="cursor: pointer; pointer-events: all;"
ng-click
diese Option , um den Text zu löschen.JavaScript (app.js)
HTML (index.html Snippet)
Hier ist der Plunker: http://plnkr.co/edit/av9VFw?p=preview
quelle
Machen Sie es mit Inline-Stilen und Skripten:
quelle
Hier ist meine Arbeitslösung mit Suche und klarem Symbol für Angularjs \ Bootstrap mit CSS.
quelle
Nicht an Element-ID binden, sondern nur das 'vorherige' Eingabeelement zum Löschen verwenden.
CSS:
Javascript:
Verwenden Sie HTML Markup so oft Sie möchten:
quelle
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.
In CSS-Position die Spanne entsprechend,
quelle