Làm cách nào để xóa hộp tìm kiếm có dấu 'x' trong bootstrap 3?

Gặp một số rắc rối với bootstrap, vì vậy một số trợ giúp sẽ rất tuyệt vời. Cảm ơn

Những gì tôi muốn: (phần trên cùng)

Mã hiện tại của tôi:

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

Ảnh chụp màn hình hiện tại:

Để có được một cái gì đó như thế này

với Bootstrap 3 và Jquery sử dụng mã HTML sau:

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

và một số CSS:

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

và Javascript:

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

Tất nhiên bạn phải viết thêm Javascript cho bất kỳ chức năng nào bạn cần, ví dụ như để ẩn 'x' nếu đầu vào trống, thực hiện các yêu cầu Ajax, v.v. Xem http://www.bootply.com/121508

Giải pháp HTML 5 siêu đơn giản:

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

Nguồn: Hướng dẫn HTML 5 - Loại đầu vào: Tìm kiếm

Điều đó hoạt động trong ít nhất Chrome 8, Edge 14, IE 10 và Safari 5 và không yêu cầu Bootstrap hoặc bất kỳ thư viện nào khác. (Thật không may, có vẻ như Firefox chưa hỗ trợ nút xóa tìm kiếm.)

Sau khi nhập vào hộp tìm kiếm, dấu 'x' sẽ xuất hiện, bạn có thể nhấp vào để xóa văn bản. Điều này sẽ vẫn hoạt động như một hộp chỉnh sửa thông thường (không có nút 'x') trong các trình duyệt khác, chẳng hạn như Firefox, vì vậy người dùng Firefox thay vào đó có thể chọn văn bản và nhấn xóa, hoặc ...

Nếu bạn thực sự cần tính năng tuyệt vời này được hỗ trợ trong Firefox, thì bạn có thể triển khai một trong các giải pháp khác được đăng ở đây dưới dạng polyfill cho các phần tử [type = search] đầu vào. Polyfill là mã tự động thêm tính năng trình duyệt tiêu chuẩn khi trình duyệt của người dùng không hỗ trợ tính năng này. Theo thời gian, hy vọng là bạn có thể loại bỏ các polyfills khi các trình duyệt triển khai các tính năng tương ứng. Và trong mọi trường hợp, việc triển khai polyfill có thể giúp giữ cho mã HTML sạch hơn.

Nhân tiện, các kiểu nhập HTML 5 khác (chẳng hạn như "ngày tháng", "số", "email", v.v.) cũng sẽ chuyển sang một hộp soạn thảo thuần túy. Một số trình duyệt có thể cung cấp cho bạn một công cụ chọn ngày ưa thích, một điều khiển xoay với các nút lên / xuống hoặc (trên điện thoại di động) một bàn phím đặc biệt bao gồm ký hiệu '@' và nút '.com', nhưng theo hiểu biết của tôi, tất cả các trình duyệt ít nhất sẽ hiển thị một hộp văn bản thuần túy cho bất kỳ loại đầu vào không được công nhận nào.

Giải pháp Bootstrap 3 & HTML 5

Bootstrap 3 đặt lại rất nhiều CSS và phá vỡ nút hủy tìm kiếm HTML 5. Sau khi CSS Bootstrap 3 đã được tải, bạn có thể khôi phục nút hủy tìm kiếm bằng CSS được sử dụng trong ví dụ sau:

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

Nguồn: Đầu vào tìm kiếm HTML 5 không hoạt động với Bootstrap

Tôi đã kiểm tra rằng giải pháp này hoạt động trong các phiên bản mới nhất của Chrome, Edge và Internet Explorer. Tôi không thể kiểm tra trong Safari. Thật không may, nút 'x' để xóa tìm kiếm không xuất hiện trong Firefox, nhưng như trên, một polyfill có thể được triển khai cho các trình duyệt không hỗ trợ tính năng này nguyên bản (tức là Firefox).

Tôi đã cố gắng tránh quá nhiều CSS tùy chỉnh và sau khi đọc một số ví dụ khác, tôi đã hợp nhất các ý tưởng ở đó và nhận được giải pháp này:

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

Vì tôi không sử dụng JavaScript của bootstrap, chỉ sử dụng CSS cùng với Angular, nên tôi không cần các lớp có-clear và form-control-clear, và tôi đã triển khai hàm clear trong bộ điều khiển AngularJS của mình. Với JavaScript của bootstrap, điều này có thể khả thi nếu không có JavaScript riêng.

Cảm ơn đã giải nén, giải pháp của bạn rất sạch. Tôi đang sử dụng các biểu mẫu bootstrap ngang và thực hiện một vài sửa đổi để cho phép một trình xử lý và biểu mẫu css.

html: - CẬP NHẬT để sử dụng phản hồi có-phản hồi và-kiểm soát-biểu mẫu của Bootstrap

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

ví dụ: http://www.bootply.com/130682

Câu trả lời về AngularJS / UI-Bootstrap

• Sử dụng lớp có phản hồi của Bootstrap để hiển thị một biểu tượng bên trong trường nhập liệu.
• Đảm bảo rằng biểu tượng có style="cursor: pointer; pointer-events: all;"
• Sử dụng ng-clickđể xóa văn bả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 (đoạn mã 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>

Đây là plunker: http://plnkr.co/edit/av9VFw?p=preview

Làm điều đó với các kiểu nội tuyến và tập lệnh:

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

Đây là giải pháp làm việc của tôi với tìm kiếm và biểu tượng rõ ràng cho Angularjs \ Bootstrap với 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; 
}

Không liên kết với id phần tử, chỉ sử dụng phần tử đầu vào 'trước đó' để xóa.

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

Đánh dấu HTML, sử dụng bao nhiêu tùy thích:

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

Đặt hình ảnh (biểu tượng hủy) với vị trí tuyệt đối, điều chỉnh các thuộc tính trên cùng và bên trái và phương thức gọi sự kiện onclick sẽ xóa trường nhập.

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

Trong css định vị nhịp tương ứng,

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