Как очистить поле поиска с помощью символа «x» в начальной загрузке 3?

94

Возникли проблемы с загрузкой, так что некоторая помощь будет потрясающей. Благодарность

Что бы я хотел: (верхняя часть)

введите описание изображения здесь

Мой текущий код:

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

Текущий снимок экрана:

введите описание изображения здесь

K2SO Призрачный дух
источник

Ответы:

209

Чтобы получить что-то вроде этого

ввод с кнопкой очистки

с Bootstrap 3 и Jquery используйте следующий HTML-код:

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

и немного CSS:

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

и Javascript:

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

Конечно, вам нужно написать больше Javascript для любых функций, которые вам нужны, например, чтобы скрыть 'x', если вход пуст, делать запросы Ajax и так далее. См. Http://www.bootply.com/121508.

беспроволочный
источник
4
Если кто-то предпочитает Plunker Bootply, вот он: plnkr.co/edit/c2710u?p=preview
tanguy_k
2
С точки зрения доступности было бы лучше, если бы #searchclearпромежуток был кнопкой. Это интерактивный элемент, поэтому отметьте его как интерактивный элемент. В настоящее время пользователи, которые полагаются на навигацию с помощью клавиатуры, не могут переходить в область четкости поиска, и ее нелегко распознать вспомогательными технологиями (такими как программы чтения с экрана),
Ян Дикинсон,
3
Я просто попробовал исправить это на случай, если вы используете этот ввод, встроенный в другие элементы (например, надстройки, раскрывающиеся position: relativeсписки z-index: 10; top: 10pxи т. Д.). Просто удалите класс обертывающего div, установите его, а затем настройте #searchclear с помощью и удалитеbottom: 0
RecuencoJones
Разве не противоречие между верхом, низом и высотой?
nafg,
98

Супер-простое решение 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), можно реализовать полифил.

YipYip
источник
2
FWIW: Я не верю, что это больше работает в Chrome. Может быть, он больше не является частью официальной спецификации CSS? W3Schools говорит, что «поле поиска ведет себя как обычное текстовое поле», а MDN не упоминает об этой функции. MDN действительно говорит, что удалит новые строки, но это все для этого типа ввода.
KyleFarris
3
@KyleFarris Оба вышеуказанных метода все еще работают у меня в Chrome версии 58.0.3029.110 (64-бит). Вам нужно ввести что-то в поле поиска, прежде чем появится кнопка очистки.
YipYip
Как этот ответ с высоким рейтингом решает проблему OP для отображения кнопки «очистить» внутри текстового поля, очищающего его содержимое?
usr-local-ΕΨΗΕΛΩΝ,
2
Это непростое решение, если оно не работает во всех основных браузерах.
thelem
1
@AnandUndavia Спасибо, что сообщили об этом. Я обновил свой ответ, указав "Bootstrap 3", который OP использовал при публикации вопроса (еще в 2013 году). Я постараюсь, чтобы мой ответ работал для Bootstrap 4, когда у меня будет время.
YipYip 07
23

Я пытался избежать слишком большого количества пользовательского 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.

Пол Веллнер Боу
источник
1
Вы также можете добавить кнопку ng-hide к кнопке X, чтобы не видеть ее, если ввод пуст.
jrvidotti
за кнопку очистки ng-click="ctrl.searchService.searchTerm = null"иng-show="ctrl.searchService.searchTerm"
Адриан
18

Благодаря 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

LDAdams
источник
8
После начальной загрузки v3.3.0 вам нужно будет установить для указателя-события с none на auto, иначе вы не сможете щелкнуть по form-control-feedback.
Vizjerai
Что $(".clearer").hide($(this).prev('input').val());делать? Разве это не может быть просто так $(".clearer").hide();?
Джим Бак
Я предполагаю, что его намерение состояло в том, чтобы передать правдивый параметр hide (), чтобы начать скрывать / отображать в зависимости от того, имеет ли вход уже значение. Если это было намерением, он потерпел неудачу (hide всегда прячется). Должно быть$(".clearer").toggle(!!$(this).prev('input').val());
Джефф Шеплер
15

Ответ AngularJS / UI-Bootstrap

  • Используйте класс has-feedback 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

Дерек Сойке
источник
1

Сделайте это с помощью встроенных стилей и скрипта:

<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>
Денис Сивзов
источник
1

Вот мое рабочее решение с поиском и очисткой значка для 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; 
}
Павант
источник
1

Не привязывайтесь к идентификатору элемента, просто используйте «предыдущий» элемент ввода для очистки.

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>
пицца
источник
-7

Поместите изображение (значок отмены) с абсолютной позицией, настройте свойства 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%;
}
code2use
источник