Bootstrap 3'te 'x' olan bir arama kutusunu nasıl temizlerim?

Önyükleme ile biraz sorun yaşıyorsanız, biraz yardım harika olurdu. Teşekkürler

Ne isterdim: (üst kısım)

Mevcut kodum:

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

Mevcut Ekran Görüntüsü:

Bunun gibi bir şey elde etmek için

Bootstrap 3 ve Jquery ile aşağıdaki HTML kodunu kullanın:

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

ve biraz CSS:

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

ve Javascript:

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

Elbette, ihtiyacınız olan işlevsellik için daha fazla Javascript yazmanız gerekir, örneğin, giriş boşsa 'x'i gizlemek, Ajax isteklerinde bulunmak vb. Bkz http://www.bootply.com/121508

Süper basit HTML 5 Çözümü:

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

Kaynak: HTML 5 Eğitimi - Giriş Türü: Arama

Bu, en az Chrome 8, Edge 14, IE 10 ve Safari 5'te çalışır ve Bootstrap veya başka bir kitaplık gerektirmez. (Ne yazık ki, Firefox henüz aramayı temizle düğmesini desteklemiyor.)

Arama kutusuna yazdıktan sonra, metni temizlemek için tıklanabilecek bir 'x' görünecektir. Bu, Firefox gibi diğer tarayıcılarda sıradan bir düzenleme kutusu olarak ('x' düğmesi olmadan) çalışmaya devam edecek, böylece Firefox kullanıcıları bunun yerine metni seçip sil'e basabilir veya ...

Firefox'ta desteklenen bu hoş özelliği gerçekten ihtiyacınız varsa, burada yayınlanan diğer çözümlerden birini girdi [tür = arama] öğeleri için çoklu dolgu olarak uygulayabilirsiniz. Çoklu doldurma, kullanıcının tarayıcısı özelliği desteklemediğinde otomatik olarak standart bir tarayıcı özelliği ekleyen koddur. Zamanla, tarayıcılar ilgili özellikleri uygularken çoklu dolguları kaldırabilmeniz için umut vardır. Ve her durumda, bir çoklu doldurma uygulaması HTML kodunu daha temiz tutmaya yardımcı olabilir.

Bu arada, diğer HTML 5 girdi türleri ("tarih", "sayı", "e-posta" vb.) Da zarif bir şekilde düz bir düzenleme kutusuna indirgenecektir. Bazı tarayıcılar size süslü bir tarih seçici, yukarı / aşağı düğmeleri olan bir döner kontrol veya (cep telefonlarında) '@' işareti ve bir '.com' düğmesi içeren özel bir klavye verebilir, ancak bildiğim kadarıyla tüm tarayıcılar niyet en azından herhangi tanınmayan giriş türü için bir düz metin kutusu gösterir.

Bootstrap 3 ve HTML 5 Çözümü

Bootstrap 3, birçok CSS'yi sıfırlar ve HTML 5 arama iptal düğmesini kırar. Bootstrap 3 CSS yüklendikten sonra, aşağıdaki örnekte kullanılan CSS ile arama iptal düğmesini geri yükleyebilirsiniz:

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

Kaynak: HTML 5 Arama Girişi Bootstrap ile Çalışmıyor

Bu çözümün Chrome, Edge ve Internet Explorer'ın en son sürümlerinde çalıştığını test ettim. Safari'de test yapamıyorum. Ne yazık ki, aramayı temizlemek için 'x' düğmesi Firefox'ta görünmüyor, ancak yukarıda olduğu gibi, bu özelliği yerel olarak desteklemeyen tarayıcılar için (yani Firefox) bir çoklu doldurma uygulanabilir.

Çok fazla özel CSS'den kaçınmaya çalıştım ve diğer bazı örnekleri okuduktan sonra oradaki fikirleri birleştirdim ve şu çözümü aldım:

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

Bootstrap'in JavaScript'ini, sadece Angular ile birlikte CSS'yi kullanmadığım için, sınıfların has-clear ve form-control-clear'e ihtiyacım yok ve AngularJS denetleyicimde clear işlevini uyguladım. Bootstrap'in JavaScript'iyle bu, kendi JavaScript olmadan mümkün olabilir.

Teşekkürler kablosuz çözümünüz çok temizdi. Yatay önyükleme formları kullanıyordum ve tek bir işleyiciye izin vermek ve css oluşturmak için birkaç değişiklik yaptım.

html: - Bootstrap has-feedback ve form-control-feedback'i kullanmak için GÜNCELLENDİ

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

örnek: http://www.bootply.com/130682

AngularJS / UI-Bootstrap Cevap

• Giriş alanının içinde bir simge göstermek için Bootstrap has-feedback sınıfını kullanın.
• Simgede olduğundan emin olun. style="cursor: pointer; pointer-events: all;"
• ng-clickMetni temizlemek için kullanın .

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 snippet)

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

İşte plunker: http://plnkr.co/edit/av9VFw?p=preview

Satır içi stiller ve komut dosyasıyla yapın:

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

İşte Angularjs \ Bootstrap with CSS için arama ve temizle simgesi olan çalışma çözümüm.

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

Öğe kimliğine bağlanmayın, temizlemek için yalnızca 'önceki' giriş öğesini kullanın.

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 İşaretleme, istediğiniz kadar kullanın:

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

Görüntüyü (iptal simgesi) mutlak konuma yerleştirin, üst ve sol özelliklerini ayarlayın ve giriş alanını temizleyen onclick olay yöntemini çağırın.

<div class="form-control">
    <input type="text" id="inputField" />
</div>
<span id="iconSpan"><img src="icon.png" onclick="clearInputField()"/></span>

Css konumunda aralık buna göre,

#iconSpan {
 position : absolute;
 top:1%;
 left :14%;
}