Як очистити поле пошуку знаком "x" у bootstrap 3?

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

Що б я хотів: (верхня частина)

Мій поточний код:

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

Поточний знімок екрана:

Щоб отримати щось подібне

з 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

Надпросте рішення HTML 5:

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

Джерело: Підручник з HTML 5 - Тип введення: Пошук

Це працює щонайменше в Chrome 8, Edge 14, IE 10 і Safari 5 і не вимагає Bootstrap або будь-якої іншої бібліотеки. (На жаль, схоже, Firefox ще не підтримує кнопку очищення пошуку.)

Після набору тексту у вікні пошуку з’явиться знак «x», на який можна натиснути, щоб очистити текст. Це все одно буде працювати як звичайне поле редагування (без кнопки "x") в інших браузерах, таких як Firefox, тому користувачі Firefox можуть замість цього виділити текст і натиснути delete або ...

Якщо вам справді потрібна ця приємна у користуванні функція, що підтримується у Firefox, тоді ви можете реалізувати одне з інших рішень, розміщених тут як полізаповнення для введення елементів [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 Введення даних не працює з 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 bootstrap, а лише CSS разом з Angular, мені не потрібні класи has-clear та form-control-clear, і я реалізував функцію clear у своєму контролері AngularJS. За допомогою завантажувального JavaScript це можливо без власного JavaScript.

Дякую, бездротовий, ваше рішення було дуже чистим. Я використовував горизонтальні форми bootstrap і зробив кілька модифікацій, щоб дозволити один обробник і css форми.

html: - ОНОВЛЕНО, щоб використовувати Bootstrap's 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

Відповідь AngularJS / UI-Bootstrap

• Використовуйте клас « зворотній зв'язок» 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>

Розмістіть зображення (піктограма скасування) з абсолютним положенням, відрегулюйте властивості зверху та ліворуч та метод виклику 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%;
}