বুটস্ট্র্যাপ 3-এ একটি 'এক্স' দিয়ে আমি কীভাবে একটি অনুসন্ধান বাক্স সাফ করব?

Question 1

বুটস্ট্র্যাপ নিয়ে কিছু সমস্যা হচ্ছে, তাই কিছু সহায়তা দুর্দান্ত হবে। ধন্যবাদ

আমি যা চাই: (শীর্ষ অংশ)

এখানে চিত্র বর্ণনা লিখুন

আমার বর্তমান কোড:

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

বর্তমান স্ক্রিনশট:

এখানে চিত্র বর্ণনা লিখুন

Question 2

এই জাতীয় কিছু পেতে

পরিষ্কার বোতাম সহ ইনপুট

বুটস্ট্র্যাপ 3 এবং জ্যাকুরির সাহায্যে নিম্নলিখিত এইচটিএমএল কোডটি ব্যবহার করুন:

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

অবশ্যই আপনার যা কার্যকারিতা প্রয়োজন তার জন্য আপনাকে আরও জাভাস্ক্রিপ্ট লিখতে হবে, যেমন ইনপুট ফাঁকা থাকলে 'এক্স' লুকিয়ে রাখতে, অ্যাজাক্স অনুরোধ করুন এবং আরও কিছু করুন। Http://www.bootply.com/121508 দেখুন

Question 3

সুপার-সিম্পল এইচটিএমএল 5 সমাধান:

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

স্নিপেট প্রসারিত করুন

উত্স: এইচটিএমএল 5 টি টিউটোরিয়াল - ইনপুট প্রকার: অনুসন্ধান

এটি কমপক্ষে Chrome 8, এজ 14, আইই 10 এবং সাফারি 5 এ কাজ করে এবং বুটস্ট্র্যাপ বা অন্য কোনও লাইব্রেরির প্রয়োজন নেই does (দুর্ভাগ্যক্রমে, মনে হচ্ছে ফায়ারফক্স এখনও অনুসন্ধানের সাফ বোতাম সমর্থন করে না।)

অনুসন্ধান বাক্সে টাইপ করার পরে, একটি 'এক্স' উপস্থিত হবে যা পাঠ্যটি সাফ করার জন্য ক্লিক করা যেতে পারে। এটি এখনও ফায়ারফক্সের মতো অন্যান্য ব্রাউজারগুলিতে ('x' বোতাম ছাড়াই) একটি সাধারণ সম্পাদনা বাক্স হিসাবে কাজ করবে, সুতরাং ফায়ারফক্স ব্যবহারকারীরা পরিবর্তে পাঠ্যটি নির্বাচন করতে এবং মুছতে চাপতে বা ...

আপনার যদি সত্যিই ফায়ারফক্সে এই চমত্কার বৈশিষ্ট্যটি সমর্থন করার প্রয়োজন হয় তবে আপনি এখানে ইনপুট [টাইপ = অনুসন্ধান] উপাদানগুলির জন্য পলিফিল হিসাবে পোস্ট করা অন্য সমাধানগুলির একটি প্রয়োগ করতে পারেন। পলিফিল হ'ল এমন একটি কোড যা ব্যবহারকারীর ব্রাউজারটি বৈশিষ্ট্যটি সমর্থন করে না তখন স্বয়ংক্রিয়ভাবে একটি মানক ব্রাউজার বৈশিষ্ট্য যুক্ত করে। সময়ের সাথে সাথে, আশা করা যায় যে ব্রাউজারগুলি সম্পর্কিত বৈশিষ্ট্যগুলি প্রয়োগ করে আপনি পলিফিলগুলি সরাতে সক্ষম হবেন। এবং যে কোনও ক্ষেত্রে, একটি পলিফিল বাস্তবায়ন এইচটিএমএল কোড ক্লিনার রাখতে সহায়তা করতে পারে।

যাইহোক, অন্যান্য এইচটিএমএল 5 ইনপুট ধরণের (যেমন "তারিখ", "নম্বর", "ইমেল" ইত্যাদি) সরল সম্পাদনা বাক্সেও কৃপণভাবে হ্রাস পাবে। কিছু ব্রাউজার আপনাকে অভিনব তারিখ চয়নকারী, উপরে / ডাউন বোতাম সহ একটি স্পিনার নিয়ন্ত্রণ বা (মোবাইল ফোনে) একটি বিশেষ কীবোর্ড দেয় যাতে '@' চিহ্ন এবং একটি '। কম' বোতাম অন্তর্ভুক্ত থাকে তবে আমার জ্ঞানের কাছে সমস্ত ব্রাউজার কমপক্ষে কোনও স্বীকৃত ইনপুট ধরণের জন্য একটি সাধারণ পাঠ্য বাক্সটি প্রদর্শন করবে ।

বুটস্ট্র্যাপ 3 এবং এইচটিএমএল 5 সমাধান

বুটস্ট্র্যাপ 3 অনেকগুলি সিএসএস পুনরায় সেট করে এবং এইচটিএমএল 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>

স্নিপেট প্রসারিত করুন

উত্স: এইচটিএমএল 5 অনুসন্ধান ইনপুট বুটস্ট্র্যাপের সাথে কাজ করে না

আমি পরীক্ষা করেছি যে এই সমাধানটি ক্রোম, এজ এবং ইন্টারনেট এক্সপ্লোরারের সর্বশেষতম সংস্করণগুলিতে কাজ করে। আমি সাফারি তে পরীক্ষা দিতে পারছি না। দুর্ভাগ্যক্রমে, অনুসন্ধানটি সাফ করার জন্য 'এক্স' বোতামটি ফায়ারফক্সে উপস্থিত হবে না, তবে উপরের মতো, ব্রাউজারগুলির জন্য একটি পলিফিল প্রয়োগ করা যেতে পারে যা এই বৈশিষ্ট্যটি স্থানীয়ভাবে (যেমন ফায়ারফক্স) সমর্থন করে না।

Question 4

আমি অত্যধিক কাস্টম সিএসএস এড়ানোর চেষ্টা করেছি এবং অন্যান্য কয়েকটি উদাহরণ পড়ার পরে আমি ধারণাগুলি সেখানে মিশে গিয়েছি এবং এই সমাধান পেয়েছি:

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

যেহেতু আমি বুটস্ট্র্যাপের জাভাস্ক্রিপ্ট ব্যবহার করি না, কেবল সিএসএস একসাথে অ্যাঙ্গুলার সহ, আমার ক্লাসগুলি পরিষ্কার-পরিচ্ছন্ন এবং ফর্ম-কন্ট্রোল-ক্লিয়ার দরকার নেই এবং আমি আমার অ্যাংুলারজেএস কন্ট্রোলারে পরিষ্কার ফাংশনটি প্রয়োগ করেছি। বুটস্ট্র্যাপের জাভাস্ক্রিপ্টের সাহায্যে এটি নিজের জাভাস্ক্রিপ্ট ছাড়াই সম্ভব হতে পারে।

Question 5

ধন্যবাদ unwired আপনার সমাধান খুব পরিষ্কার ছিল। আমি অনুভূমিক বুটস্ট্র্যাপ ফর্মগুলি ব্যবহার করছিলাম এবং একটি একক হ্যান্ডলার এবং ফর্ম সিএসএসের অনুমতি দেওয়ার জন্য কয়েকটি পরিবর্তন করেছি made

এইচটিএমএল: - বুটস্ট্র্যাপের ফিডব্যাক এবং ফর্ম-নিয়ন্ত্রণ-প্রতিক্রিয়া ব্যবহার করতে আপডেট করা

 <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

কৌণিক জেএস / ইউআই-বুটস্ট্র্যাপ উত্তর

ইনপুট ক্ষেত্রের ভিতরে একটি আইকন দেখানোর জন্য বুটস্ট্র্যাপের ফিডব্যাক ক্লাসটি ব্যবহার করুন।
আইকনটি রয়েছে তা নিশ্চিত করুন 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 স্নিপেট)

      <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= পূর্বরূপ দেখুন

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

এলিমেন্ট আইডিতে বাঁধবেন না, সাফ করতে কেবল 'পূর্ববর্তী' ইনপুট উপাদানটি ব্যবহার করুন।

সিএসএস:

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

এইচটিএমএল মার্কআপ, আপনার পছন্দমতো ব্যবহার করুন:

<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

অবস্থান নিখুঁত সহ চিত্রটি (আইকন বাতিল করুন) রাখুন, উপরের এবং বাম বৈশিষ্ট্যগুলি সমন্বয় করুন এবং কল পদ্ধতি অনক্লিক ইভেন্ট যা ইনপুট ক্ষেত্রটি সাফ করে।

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