Возникли проблемы с загрузкой, так что некоторая помощь будет потрясающей. Благодарность
Что бы я хотел: (верхняя часть)
Мой текущий код:
<div class="form-group">
<input type="text"
class="form-control"
id="findJobTitle"
name="findJobTitle"
placeholder="Job Title, Keywords"
onkeyup="showResult()">
</div>
Текущий снимок экрана:
twitter-bootstrap
twitter-bootstrap-3
K2SO Призрачный дух
источник
источник
#searchclear
промежуток был кнопкой. Это интерактивный элемент, поэтому отметьте его как интерактивный элемент. В настоящее время пользователи, которые полагаются на навигацию с помощью клавиатуры, не могут переходить в область четкости поиска, и ее нелегко распознать вспомогательными технологиями (такими как программы чтения с экрана),position: relative
спискиz-index: 10; top: 10px
и т. Д.). Просто удалите класс обертывающего div, установите его, а затем настройте #searchclear с помощью и удалитеbottom: 0
Супер-простое решение HTML 5:
<input type="search" placeholder="Search..." />
Источник: Учебное пособие по HTML 5 - Тип ввода: Поиск
Это работает как минимум в Chrome 8, Edge 14, IE 10 и Safari 5 и не требует Bootstrap или какой-либо другой библиотеки. (К сожалению, похоже, что Firefox еще не поддерживает кнопку очистки поиска.)
После ввода в поле поиска появится значок «x», который можно щелкнуть, чтобы очистить текст. Это по-прежнему будет работать как обычное поле редактирования (без кнопки 'x') в других браузерах, таких как Firefox, поэтому пользователи Firefox могут вместо этого выбрать текст и нажать удалить или ...
Если вам действительно нужна эта удобная функция, поддерживаемая в Firefox, вы можете реализовать одно из других решений, опубликованных здесь, как полифил для элементов input [type = search]. Полифилл - это код, который автоматически добавляет стандартную функцию браузера, когда браузер пользователя не поддерживает эту функцию. Есть надежда, что со временем вы сможете удалить полифиллы по мере того, как браузеры реализуют соответствующие функции. И в любом случае реализация полифила может помочь сохранить чистоту кода HTML.
Кстати, другие типы ввода HTML 5 (такие как «дата», «число», «электронная почта» и т. Д.) Также будут постепенно преобразовываться в простое поле редактирования. Некоторые браузеры могут предоставить вам причудливое средство выбора даты, элемент управления счетчиком с кнопками вверх / вниз или (на мобильных телефонах) специальную клавиатуру, которая включает знак '@' и кнопку '.com', но, насколько мне известно, все браузеры будет по крайней мере показать простое текстовое поле для любого неизвестного типа входного сигнала.
Решение Bootstrap 3 и HTML 5
Bootstrap 3 сбрасывает большую часть CSS и нарушает работу кнопки отмены поиска HTML 5. После загрузки CSS Bootstrap 3 вы можете восстановить кнопку отмены поиска с помощью CSS, используемого в следующем примере:
<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>
Источник: HTML 5 Search Input не работает с Bootstrap
Я проверил, что это решение работает в последних версиях Chrome, Edge и Internet Explorer. Я не могу тестировать в Safari. К сожалению, кнопка «x» для очистки результатов поиска не отображается в Firefox, но, как указано выше, для браузеров, которые не поддерживают эту функцию изначально (например, Firefox), можно реализовать полифил.
источник
Я пытался избежать слишком большого количества пользовательского CSS, и после прочтения некоторых других примеров я объединил там идеи и получил следующее решение:
<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>
Поскольку я не использую загрузочный JavaScript, а только CSS вместе с Angular, мне не нужны классы has-clear и form-control-clear, и я реализовал функцию clear в своем контроллере AngularJS. С загрузочным JavaScript это возможно без собственного JavaScript.
источник
ng-click="ctrl.searchService.searchTerm = null"
иng-show="ctrl.searchService.searchTerm"
Благодаря UnWired ваше решение было очень чисто. Я использовал горизонтальные формы начальной загрузки и сделал несколько модификаций, чтобы учесть один обработчик и сформировать CSS.
html: - ОБНОВЛЕНО для использования в Bootstrap has-feedback и 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(); });
пример: http://www.bootply.com/130682
источник
$(".clearer").hide($(this).prev('input').val());
делать? Разве это не может быть просто так$(".clearer").hide();
?$(".clearer").toggle(!!$(this).prev('input').val());
Ответ AngularJS / UI-Bootstrap
style="cursor: pointer; pointer-events: all;"
ng-click
чтобы очистить текст.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)
<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>
Вот плункер: http://plnkr.co/edit/av9VFw?p=preview
источник
Сделайте это с помощью встроенных стилей и скрипта:
<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>
источник
Вот мое рабочее решение с поиском и очисткой значка для Angularjs \ Bootstrap с 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; }
источник
Не привязывайтесь к идентификатору элемента, просто используйте «предыдущий» элемент ввода для очистки.
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, используйте сколько угодно:
<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>
источник
Поместите изображение (значок отмены) с абсолютной позицией, настройте свойства top и left и вызовите метод onclick, который очищает поле ввода.
<div class="form-control"> <input type="text" id="inputField" /> </div> <span id="iconSpan"><img src="icon.png" onclick="clearInputField()"/></span>
В css расположите диапазон соответственно,
#iconSpan { position : absolute; top:1%; left :14%; }
источник