मैं बूटस्ट्रैप 3 में 'x' के साथ एक खोज बॉक्स कैसे साफ़ करूं?

Question

बूटस्ट्रैप के साथ कुछ परेशानी हो रही है, इसलिए कुछ मदद भयानक होगी। धन्यवाद

मैं क्या चाहूंगा: (शीर्ष भाग)

मेरा वर्तमान कोड:

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

वर्तमान स्क्रीनशॉट:

Answer 1

ऐसा कुछ पाने के लिए

बूटस्ट्रैप 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>

और कुछ सीएसएस:

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

और जावास्क्रिप्ट:

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

बेशक आपको जो भी कार्यक्षमता की आवश्यकता हो, उसके लिए अधिक जावास्क्रिप्ट लिखना होगा, उदाहरण के लिए 'x' को छिपाने के लिए यदि इनपुट खाली है, तो अजाक्स अनुरोध करें और इसी तरह। Http://www.bootply.com/121508 देखें

Comments

यदि कोई बूटलाइनर पर प्लंकर को पसंद करता है, तो यह यहां है: plnkr.co/edit/c2710u?p=preview

— tanguy_k

एक्सेस-पॉइंट-ऑफ़-व्यू से, #searchclearस्पैन के लिए बटन होना बेहतर होगा । यह एक इंटरैक्टिव तत्व है, इसलिए इसे एक इंटरैक्टिव तत्व के रूप में चिह्नित करें। जैसा कि यह खड़ा है, कीबोर्ड नेविगेशन पर भरोसा करने वाले उपयोगकर्ता सर्चक्लियर स्पैन को टैब नहीं कर सकते हैं, और यह सहायक प्रौद्योगिकियों (जैसे स्क्रीन रीडर) द्वारा आसानी से पहचाना नहीं जाएगा

— इयान डिकिंसन

मैंने अभी इसके लिए एक ठीक करने की कोशिश की है कि आप इस इनपुट इनलाइन का उपयोग अन्य तत्वों (जैसे एडऑन, ड्रॉपडाउन, आदि) के साथ कर रहे हैं। बस रैपिंग डिव की क्लास को हटा दें, इसे सेट करें position: relativeऔर फिर #searchclear को इसके साथ समायोजित करें z-index: 10; top: 10pxऔर निकालेंbottom: 0

— RecuadoJones

क्या यह शीर्ष, नीचे और ऊंचाई के लिए विरोधाभास नहीं है?

— nafg

Answer 2

सुपर-सरल HTML 5 समाधान:

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

स्रोत: HTML 5 ट्यूटोरियल - इनपुट प्रकार: खोज

यह कम से कम क्रोम 8, एज 14, IE 10 और सफारी 5 में काम करता है और इसमें बूटस्ट्रैप या किसी अन्य लाइब्रेरी की आवश्यकता नहीं होती है। (दुर्भाग्य से, ऐसा लगता है कि फ़ायरफ़ॉक्स अभी तक खोज स्पष्ट बटन का समर्थन नहीं करता है।)

खोज बॉक्स में टाइप करने के बाद, एक 'x' दिखाई देगा जो पाठ को साफ़ करने के लिए क्लिक किया जा सकता है। यह अभी भी फ़ायरफ़ॉक्स जैसे अन्य ब्राउज़रों में एक साधारण संपादन बॉक्स ('एक्स' बटन के बिना) के रूप में काम करेगा, इसलिए फ़ायरफ़ॉक्स उपयोगकर्ता इसके बजाय पाठ का चयन कर सकते हैं और हटा सकते हैं, या ...

यदि आपको फ़ायरफ़ॉक्स में समर्थित इस अच्छे-से-फीचर की वास्तव में आवश्यकता है, तो आप इनपुट [प्रकार = खोज] तत्वों के लिए पॉलीफ़िल के रूप में यहां पोस्ट किए गए अन्य समाधानों में से एक को लागू कर सकते हैं। एक पॉलीफ़िल कोड है जो उपयोगकर्ता के ब्राउज़र द्वारा सुविधा का समर्थन नहीं करने पर स्वचालित रूप से एक मानक ब्राउज़र सुविधा जोड़ता है। समय के साथ, आशा है कि आप पॉलीफ़िल को हटा पाएंगे क्योंकि ब्राउज़र संबंधित सुविधाओं को लागू करते हैं। और किसी भी मामले में, पॉलीफ़िल कार्यान्वयन HTML कोड को साफ रखने में मदद कर सकता है।

वैसे, अन्य HTML 5 इनपुट प्रकार (जैसे "दिनांक", "संख्या", "ईमेल", आदि) भी सादे संपादन बॉक्स में शान से नीचा दिखाएंगे। कुछ ब्राउज़र आपको फैंसी डेट पिकर, अप / डाउन बटन के साथ एक स्पिनर नियंत्रण, या (मोबाइल फोन पर) एक विशेष कीबोर्ड प्रदान कर सकते हैं जिसमें '@' साइन और '.com' बटन शामिल हैं, लेकिन मेरे ज्ञान के लिए, सभी ब्राउज़र। होगा कम से कम किसी भी गैर मान्यता प्राप्त इनपुट प्रकार के लिए एक सादा पाठ बॉक्स दिखाते हैं।

---

बूटस्ट्रैप 3 और एचटीएमएल 5 समाधान

बूटस्ट्रैप 3 बहुत सीएसएस को रीसेट करता है और HTML 5 खोज रद्द बटन को तोड़ता है। बूटस्ट्रैप 3 सीएसएस लोड होने के बाद, आप निम्न उदाहरण में उपयोग किए गए सीएसएस के साथ खोज रद्द बटन को पुनर्स्थापित कर सकते हैं:

<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 खोज इनपुट बूटस्ट्रैप के साथ काम नहीं करता है

मैंने परीक्षण किया है कि यह समाधान क्रोम, एज और इंटरनेट एक्सप्लोरर के नवीनतम संस्करणों में काम करता है। मैं सफारी में परीक्षण नहीं कर पा रहा हूं। दुर्भाग्य से, खोज को साफ़ करने के लिए 'x' बटन फ़ायरफ़ॉक्स में दिखाई नहीं देता है, लेकिन ऊपर, उन ब्राउज़रों के लिए एक पॉलीफ़िल लागू किया जा सकता है जो मूल रूप से (यानी फ़ायरफ़ॉक्स) इस सुविधा का समर्थन नहीं करते हैं।

Comments

FWIW: मुझे विश्वास नहीं है कि यह क्रोम में अब काम करता है। शायद आधिकारिक सीएसएस कल्पना का हिस्सा नहीं है? W3Schools का कहना है कि "एक खोज क्षेत्र एक नियमित पाठ क्षेत्र की तरह व्यवहार करता है" और MDN इस कार्यक्षमता का कोई उल्लेख नहीं करता है। MDN का कहना है कि यह नई लाइनों को छीन लेगा लेकिन इस इनपुट प्रकार के बारे में है।

— काइलफ़ारिस

@KyleFarris ऊपर दिए गए दोनों तरीके अभी भी मेरे लिए Chrome संस्करण 58.0.3029.110 (64-बिट) में काम कर रहे हैं। स्पष्ट बटन दिखाई देने से पहले आपको खोज बॉक्स में कुछ लिखना होगा।

— यिपयिप

यह सुपर-रेटेड उत्तर ओपी मुद्दे को टेक्स्ट बॉक्स के अंदर "स्पष्ट" बटन प्रदर्शित करने के लिए कैसे संबोधित करता है जो इसकी सामग्री को साफ करता है?

— usr-local--

यदि यह सभी प्रमुख ब्राउज़रों में काम नहीं करता है तो यह एक सुपर-सरल समाधान नहीं है।

— 11

@AnandUndavia रिपोर्टिंग के लिए धन्यवाद। मैंने "बूटस्ट्रैप 3" को निर्दिष्ट करने के लिए अपने उत्तर को अपडेट किया है, जो ओपी तब उपयोग कर रहा था जब प्रश्न पोस्ट किया गया था (2013 में वापस)। मैं बूटस्ट्रैप 4 के लिए अपना जवाब काम करने में देखूंगा जब मेरे पास समय होगा।

— यिपिप

Answer 3

मैंने बहुत अधिक कस्टम सीएसएस से बचने की कोशिश की और कुछ अन्य उदाहरणों को पढ़ने के बाद मैंने विचारों को वहां मिला दिया और इस समाधान को प्राप्त किया:

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

जैसा कि मैंने बूटस्ट्रैप के जावास्क्रिप्ट का उपयोग नहीं किया है, बस सीएसएस एक साथ कोणीय के साथ, मुझे कक्षाओं की स्पष्ट और रूप-नियंत्रण-स्पष्ट की आवश्यकता नहीं है, और मैंने अपने AngularJS नियंत्रक में स्पष्ट फ़ंक्शन को लागू किया है। बूटस्ट्रैप के जावास्क्रिप्ट के साथ यह बिना जावास्क्रिप्ट के संभव हो सकता है।

Comments

यदि इनपुट खाली है तो इसे न देखने के लिए आप एक एनजी-हाइड एक्स बटन भी जोड़ सकते हैं।

— jrvidotti

स्पष्ट बटन के लिए ng-click="ctrl.searchService.searchTerm = null"औरng-show="ctrl.searchService.searchTerm"

— एड्रियन

Answer 4

धन्यवाद अनछुए आपका समाधान बहुत साफ था। मैं क्षैतिज बूटस्ट्रैप रूपों का उपयोग कर रहा था और एकल हैंडलर और फ़ॉर्म सीएसएस के लिए अनुमति देने के लिए कुछ संशोधन किए।

html: - बूटस्ट्रैप की है-प्रतिक्रिया और प्रपत्र-नियंत्रण-प्रतिक्रिया का उपयोग करने के लिए अद्यतन

 <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

Comments

बूटस्ट्रैप v3.3.0 के बाद आपको पॉइंटर-ईवेंट को बिना किसी ऑटो से सेट करने की आवश्यकता होगी अन्यथा आप फॉर्म-कंट्रोल-फीडबैक पर क्लिक नहीं कर पाएंगे।

— विज्जरई

क्या करता $(".clearer").hide($(this).prev('input').val());है? क्या यह सिर्फ नहीं हो सकता $(".clearer").hide();?

— जिम बक 20

मुझे लगता है कि यदि उसका इनपुट पहले से ही एक मूल्य है, तो उसे छिपाने के लिए () छिपा हुआ / दिखाया गया शुरू करने के लिए एक सत्य पैरामीटर पास करना था। यदि वह इरादा था, तो वह असफल हो गया (हमेशा छुपाता है)। यह होना चाहिए$(".clearer").toggle(!!$(this).prev('input').val());

— जेफ शेलर

Answer 5

AngularJS / UI-बूटस्ट्रैप उत्तर

• इनपुट क्षेत्र के अंदर एक आइकन दिखाने के लिए बूटस्ट्रैप के फीडबैक क्लास का उपयोग करें ।
• सुनिश्चित करें कि आइकन है 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>

यहाँ प्लंकर है: http://plnkr.co/edit/av9VFw?p=preview

Answer 6

इनलाइन शैलियों और स्क्रिप्ट के साथ करें:

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

Answer 7

यहाँ सीएसएस के साथ Angularjs \ बूटस्ट्रैप के लिए खोज और स्पष्ट आइकन के साथ मेरा काम कर समाधान है।

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

Answer 8

एलिमेंट आईडी से न बंधें, बस क्लियर करने के लिए 'पिछले' इनपुट एलिमेंट का उपयोग करें।

सीएसएस:

.clear-input > span {
    position: absolute;
    right: 24px;
    top: 10px;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #AAA;
}

जावास्क्रिप्ट:

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>

Answer 9

स्थिति निरपेक्ष के साथ छवि (रद्द करें आइकन) रखें, इनपुट फ़ील्ड को साफ़ करने वाले शीर्ष और बाएं गुणों और कॉल विधि ऑनक्लिक ईवेंट को समायोजित करें।

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

सीएसएस स्थिति के अनुसार अवधि,

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