ฉันจะล้างช่องค้นหาด้วย 'x' ใน bootstrap 3 ได้อย่างไร

Question 1

มีปัญหากับ bootstrap ดังนั้นความช่วยเหลือบางอย่างจะดีมาก ขอบคุณ

สิ่งที่ฉันต้องการ: (ส่วนบนสุด)

ป้อนคำอธิบายภาพที่นี่

รหัสปัจจุบันของฉัน:

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

ภาพหน้าจอปัจจุบัน:

ป้อนคำอธิบายภาพที่นี่

Question 2

เพื่อให้ได้สิ่งนี้

อินพุตด้วยปุ่มล้าง

ด้วย 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

Question 3

โซลูชัน 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 จริงๆคุณสามารถใช้หนึ่งในโซลูชันอื่น ๆ ที่โพสต์ไว้ที่นี่เป็น polyfill สำหรับองค์ประกอบอินพุต [type = search] polyfill คือรหัสที่เพิ่มคุณสมบัติเบราว์เซอร์มาตรฐานโดยอัตโนมัติเมื่อเบราว์เซอร์ของผู้ใช้ไม่รองรับคุณสมบัตินี้ เมื่อเวลาผ่านไปความหวังก็คือคุณจะสามารถลบ polyfills ได้เนื่องจากเบราว์เซอร์ใช้คุณสมบัติต่างๆ และไม่ว่าในกรณีใดการติดตั้ง polyfill สามารถช่วยให้โค้ด HTML สะอาดขึ้นได้

อย่างไรก็ตามประเภทการป้อนข้อมูล HTML 5 อื่น ๆ (เช่น "วันที่" "หมายเลข" "อีเมล" ฯลฯ ) จะลดระดับลงอย่างสง่างามเป็นช่องแก้ไขธรรมดา เบราว์เซอร์บางตัวอาจให้ตัวเลือกวันที่ที่สวยงามตัวควบคุมสปินเนอร์ด้วยปุ่มขึ้น / ลงหรือ (บนโทรศัพท์มือถือ) แป้นพิมพ์พิเศษที่มีเครื่องหมาย "@" และปุ่ม ".com" แต่สำหรับความรู้ของฉันเบราว์เซอร์ทั้งหมด จะอย่างน้อยแสดงกล่องข้อความธรรมดาสำหรับประเภทป้อนข้อมูลใด ๆ ที่ไม่รู้จัก

โซลูชัน Bootstrap 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 ไม่ทำงานกับ Bootstrap

ฉันได้ทดสอบแล้วว่าโซลูชันนี้ใช้ได้กับ Chrome, Edge และ Internet Explorer เวอร์ชันล่าสุด ฉันไม่สามารถทดสอบใน Safari ได้ น่าเสียดายที่ปุ่ม 'x' เพื่อล้างการค้นหาไม่ปรากฏใน Firefox แต่ข้างต้นคุณสามารถใช้ polyfill สำหรับเบราว์เซอร์ที่ไม่รองรับคุณสมบัตินี้ได้ (เช่น Firefox)

Question 4

ฉันพยายามหลีกเลี่ยง 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 ฉันไม่จำเป็นต้องมีคลาสที่ชัดเจนและมีรูปแบบการควบคุมที่ชัดเจนและฉันใช้ฟังก์ชันที่ชัดเจนในตัวควบคุม AngularJS ของฉัน ด้วย JavaScript ของ bootstrap สิ่งนี้อาจเป็นไปได้หากไม่มี JavaScript ของตัวเอง

Question 5

ขอบคุณโดยไม่ต้องใช้น้ำยาของคุณสะอาดมาก ฉันใช้แบบฟอร์ม bootstrap แนวนอนและทำการปรับเปลี่ยนสองสามอย่างเพื่อให้สามารถใช้ตัวจัดการเดียวและสร้าง css ได้

html: - อัปเดตเพื่อใช้คำติชมของ Bootstrap และ 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>

จาวาสคริปต์:

$(".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

Question 6

คำตอบ AngularJS / UI-Bootstrap

ใช้คลาสhas-feedbackของ Bootstrap เพื่อแสดงไอคอนภายในช่องป้อนข้อมูล
ตรวจสอบให้แน่ใจว่าไอคอนมี style="cursor: pointer; pointer-events: all;"
ใช้ng-clickเพื่อล้างข้อความ

จาวาสคริปต์ (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>

นี่คือ Plunker: http://plnkr.co/edit/av9VFw?p=preview

Question 7

ทำด้วยสไตล์และสคริปต์แบบอินไลน์:

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

Question 8

นี่คือโซลูชันการทำงานของฉันพร้อมการค้นหาและไอคอนที่ชัดเจนสำหรับ 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; 
}

Question 9

อย่าผูกกับ 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>

Question 10

วางภาพ (ไอคอนยกเลิก) ด้วยตำแหน่งสัมบูรณ์ปรับคุณสมบัติด้านบนและด้านซ้ายและวิธีการเรียกเหตุการณ์ 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%;
}