web-dev-qa-db-ja.com

bootstrap 3の '​​x'で検索ボックスをクリアするにはどうすればよいですか？

ブートストラップに問題があるため、いくつかのヘルプが素晴らしいでしょう。ありがとう

私がしたいこと：（上部）

enter image description here

私の現在のコード：

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

現在のスクリーンショット：

enter image description here

twitter-bootstraptwitter-bootstrap-3
80
K2SO Ghost Spirit

このようなものを取得するには

input with clear button

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 を参照してください

201
unwired

超シンプルなHTML 5ソリューション：

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

ソース： HTML 5チュートリアル-入力タイプ：検索

これは少なくともChrome 8、Edge 14、IE 10、およびSafari 5で動作し、Bootstrapまたはその他のライブラリを必要としません。 （残念ながら、Firefoxはまだ検索クリアボタンをサポートしていないようです。）

検索ボックスに入力すると、「x」が表示され、クリックしてテキストをクリアできます。これは、Firefoxなどの他のブラウザーでは通常の編集ボックス（「x」ボタンなし）として機能するため、Firefoxユーザーは代わりにテキストを選択して削除を押すか、...

Firefoxでこの素敵な機能をサポートする必要がある場合、input [type = search]要素のポリフィルとしてここに投稿されている他のソリューションのいずれかを実装できます。ポリフィルとは、ユーザーのブラウザーが機能をサポートしていない場合に標準のブラウザー機能を自動的に追加するコードです。時間が経つにつれて、ブラウザがそれぞれの機能を実装するときにポリフィルを削除できるようになることを期待しています。いずれにしても、ポリフィルの実装はHTMLコードをよりクリーンに保つのに役立ちます。

ちなみに、他のHTML 5入力タイプ（「日付」、「番号」、「メール」など）も、通常の編集ボックスに正常に低下します。一部のブラウザでは、高級な日付ピッカー、上/下ボタンを備えたスピナーコントロール、または（携帯電話では）「@」記号と「.com」ボタンを含む特別なキーボードが提供されますが、私の知る限り、すべてのブラウザ少なくとも認識されない入力タイプに対してプレーンテキストボックスを表示します。

ブートストラップ3およびHTML 5ソリューション

Bootstrap 3は多くのCSSをリセットし、HTML 5の検索キャンセルボタンを解除します。 Bootstrap 3 CSSが読み込まれた後、次の例で使用されている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検索入力はブートストラップでは機能しません

このソリューションが最新バージョンのChrome、Edge、およびInternet Explorerで動作することをテストしました。 Safariでテストできません。残念ながら、検索をクリアするための「x」ボタンはFirefoxには表示されませんが、上記のように、この機能をネイティブにサポートしないブラウザー（つまりFirefox）にポリフィルを実装できます。

59
YipYip

私はあまりにも多くのカスタム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は不要であり、AngularJSコントローラーにclear関数を実装しました。ブートストラップのJavaScriptを使用すると、独自のJavaScriptなしでこれが可能になる場合があります。

23
Paul Wellner Bou

ありがとうunwiredあなたのソリューションはとてもきれいでした。私は水平bootstrapフォームを使用し、単一のハンドラーとフォームcssを許可するためにいくつかの変更を行いました。

html：-更新されたBootstrapのhas-feedbackとformを使用する-制御フィードバック

 <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();
});

example：http://www.bootply.com/130682

17
LDAdams

AngularJS/UI-Bootstrap Answer

  • Bootstrapの has-feedback クラスを使用して、入力フィールド内にアイコンを表示します。
  • アイコンに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

14
Derek Soike

これは、Angularjs\Bootstrap with 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
PavanT

要素IDにバインドせず、「前の」入力要素を使用してクリアします。

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>
1
pizzamonster

インラインスタイルとスクリプトを使用して実行します。

<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
Denis Sivzov