Mam problem z bootstrapem, więc pewna pomoc byłaby niesamowita. Dzięki
Co chciałbym: (górna część)
Mój obecny kod:
<div class="form-group">
<input type="text"
class="form-control"
id="findJobTitle"
name="findJobTitle"
placeholder="Job Title, Keywords"
onkeyup="showResult()">
</div>
Bieżący zrzut ekranu:
twitter-bootstrap
twitter-bootstrap-3
Duch ducha K2SO
źródło
źródło
#searchclear
rozpiętość była przyciskiem. To element interaktywny, więc oznacz go jako element interaktywny. W obecnej sytuacji użytkownicy, którzy polegają na nawigacji za pomocą klawiatury, nie mogą przechodzić do zakresu searchclear i nie będą łatwo rozpoznawani przez technologie wspomagające (takie jak czytniki ekranu)position: relative
a następnie dostosuj #searchclear za pomocąz-index: 10; top: 10px
i usuńbottom: 0
Super proste rozwiązanie HTML 5:
<input type="search" placeholder="Search..." />
Źródło: samouczek HTML 5 - typ danych wejściowych: wyszukiwanie
Działa co najmniej w Chrome 8, Edge 14, IE 10 i Safari 5 i nie wymaga Bootstrap ani żadnej innej biblioteki. (Niestety wydaje się, że Firefox nie obsługuje jeszcze przycisku czyszczenia wyszukiwania).
Po wpisaniu w pole wyszukiwania pojawi się „x”, który można kliknąć, aby wyczyścić tekst. Będzie to nadal działać jak zwykłe pole edycji (bez przycisku `` x '') w innych przeglądarkach, takich jak Firefox, więc użytkownicy Firefoksa mogą zamiast tego zaznaczyć tekst i nacisnąć Usuń lub ...
Jeśli naprawdę potrzebujesz tej przyjemnej do posiadania funkcji obsługiwanej w Firefoksie, możesz zaimplementować jedno z innych rozwiązań zamieszczonych tutaj jako polyfill dla elementów input [type = search]. Wypełnienie to kod, który automatycznie dodaje standardową funkcję przeglądarki, gdy przeglądarka użytkownika nie obsługuje tej funkcji. Istnieje nadzieja, że z biegiem czasu uda Ci się usunąć wypełnienia w miarę wdrażania odpowiednich funkcji przez przeglądarki. W każdym razie implementacja polyfill może pomóc w utrzymaniu czystszego kodu HTML.
Nawiasem mówiąc, inne typy danych wejściowych HTML 5 (takie jak „data”, „liczba”, „e-mail” itp.) Również zostaną z wdziękiem zdegradowane do zwykłego pola edycji. Niektóre przeglądarki mogą oferować fantazyjny selektor dat, pokrętło z przyciskami w górę / w dół lub (w telefonach komórkowych) specjalną klawiaturę ze znakiem „@” i przyciskiem „.com”, ale według mojej wiedzy wszystkie przeglądarki pokaże przynajmniej zwykłe pole tekstowe dla każdego nierozpoznanego typu danych wejściowych.
Rozwiązanie Bootstrap 3 i HTML 5
Bootstrap 3 resetuje wiele CSS i łamie przycisk anulowania wyszukiwania HTML 5. Po załadowaniu kodu CSS Bootstrap 3 możesz przywrócić przycisk anulowania wyszukiwania za pomocą kodu CSS użytego w następującym przykładzie:
<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>
Źródło: Wyszukiwanie HTML 5 nie działa z Bootstrapem
Przetestowałem, że to rozwiązanie działa w najnowszych wersjach Chrome, Edge i Internet Explorer. Nie mogę przetestować w Safari. Niestety przycisk „x” służący do wyczyszczenia wyszukiwania nie pojawia się w przeglądarce Firefox, ale jak wyżej, w przeglądarkach, które nie obsługują tej funkcji natywnie (np. Firefox), można zaimplementować polyfill.
źródło
Starałem się unikać zbyt wielu niestandardowych CSS i po przeczytaniu kilku innych przykładów połączyłem tam pomysły i otrzymałem to rozwiązanie:
<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>
Ponieważ nie używam JavaScript bootstrap, tylko CSS razem z Angularem, nie potrzebuję, aby klasy miały-clear i form-control-clear, a zaimplementowałem funkcję clear w moim kontrolerze AngularJS. Z JavaScriptem bootstrapa może to być możliwe bez własnego JavaScript.
źródło
ng-click="ctrl.searchService.searchTerm = null"
ing-show="ctrl.searchService.searchTerm"
Dzięki bez okablowania Twoje rozwiązanie było bardzo czyste. Używałem poziomych formularzy bootstrap i wprowadziłem kilka modyfikacji, aby umożliwić użycie jednego handlera i formularza css.
html: - ZAKTUALIZOWANO, aby używać Bootstrap's has-feedback i form-control-feedback
<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(); });
przykład: http://www.bootply.com/130682
źródło
$(".clearer").hide($(this).prev('input').val());
? Czy to nie może być po prostu$(".clearer").hide();
?$(".clearer").toggle(!!$(this).prev('input').val());
Odpowiedź AngularJS / UI-Bootstrap
style="cursor: pointer; pointer-events: all;"
ng-click
aby wyczyścić tekst.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 fragment)
<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>
Oto plunker: http://plnkr.co/edit/av9VFw?p=preview
źródło
Zrób to za pomocą wbudowanych stylów i skryptów:
<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>
źródło
Oto moje rozwiązanie robocze z ikoną wyszukiwania i czyszczenia dla Angularjs \ Bootstrap z 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; }
źródło
Nie wiąż się z identyfikatorem elementu, po prostu użyj „poprzedniego” elementu wejściowego, aby wyczyścić.
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(); }); });
HTML Markup, używaj tyle, ile chcesz:
<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>
źródło
Umieść obraz (ikona anulowania) z pozycją bezwzględną, dostosuj właściwości top i left i wywołaj zdarzenie onclick, które czyści pole wejściowe.
<div class="form-control"> <input type="text" id="inputField" /> </div> <span id="iconSpan"><img src="icon.png" onclick="clearInputField()"/></span>
W css ustaw odpowiednio rozpiętość,
#iconSpan { position : absolute; top:1%; left :14%; }
źródło