আপনি কীভাবে একটি "অনুসন্ধান" এইচটিএমএল 5 ইনপুট সাফ করবেন?

Question

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

Comments

এইচটিএমএল 5 সম্পর্কে আমি বেশি কিছু জানি না, তবে এর কোনও onchangeইভেন্ট নেই?

— পেক্কা

ঠিক আছে, অনুসন্ধান বাক্সটি সেভাবে সাফ করা হয়েছে কিনা তা আপনি বুঝতে পেরেছিলেন, তবে সেই বোতাম বনাম নির্বাচন এবং মুছে ফেলার কারণে এটি ঘটেছে কিনা তা নয়

— এমভিসিএইচআর

এর সম্ভাব্য নকলটি কি ইনপুট অনুসন্ধানের জন্য রিসেট বিকল্পের জন্য কোনও ইভেন্ট উপলব্ধ?

— নফতালি ওরফে নীল

সম্ভাব্য উত্তর স্ট্যাকওভারফ্লো.com/a/59389615/11973798 এটি সাহায্য করে কিনা তা পরীক্ষা করে দেখুন

— শুভম খারে

আপনার কী-আপ এবং অনুসন্ধানের ইভেন্টগুলি যুক্ত করা উচিত ..

— বুর্ক Öztürk

Answer 1

প্রকৃতপক্ষে, একটি "অনুসন্ধান" ইভেন্ট রয়েছে যা যখনই ব্যবহারকারী অনুসন্ধান করবে বা ব্যবহারকারী যখন "এক্স" ক্লিক করবে তখন তা বরখাস্ত করা হয়। এটি বিশেষত দরকারী কারণ এটি "ইনক্রিমেন্টাল" বৈশিষ্ট্যটি বোঝে।

এখন, এই কথাটি বলে, আমি নিশ্চিত না যে আপনি "অনক্লিক" হ্যাক ব্যবহার না করে আপনি "এক্স" ক্লিক করার এবং অনুসন্ধানের মধ্যে পার্থক্যটি বলতে পারবেন কিনা। যে কোনও উপায়ে, আশা করি এটি সাহায্য করবে।

তথ্যসূত্র:

http://help.dottoro.com/ljdvxmhr.php

Comments

ধন্যবাদ, searchআপনি যখন 'x' এ ক্লিক করেন তখন ব্যতীত ইভেন্ট কখন ঘটে যায় তা অনুধাবন করতে পারে না । এটি আগুন লাগবে না keyup, blurবা এটি ফর্মটি জমা দিলে তা জমা হবে। তবে এটি উত্তর হিসাবে চিহ্নিত হওয়ার দাবিদার।

— মাকসিম ভি।

searchঘটনা ফায়ার উচিত যখন ব্যবহারকারী presses Enter। এবং যদি অনুসন্ধান বাক্সটির incrementalবৈশিষ্ট্যটি থাকে, ব্যবহারকারী যখন দ্বিতীয় সেকেন্ডের জন্য টাইপ করা বন্ধ করে দেয় তখন তা জ্বলে উঠবে।

— পৌন

এফওয়াইআই: এই মন্তব্যটির লেখার হিসাবে এটি কেবল ক্রোমে কাজ করে।

— জেসন

আইই 11 inputইভেন্টটি নয় তবে searchইভেন্টটি ট্রিগার করে ।

— জোসেফ লেনাক্স

"অনুসন্ধান" ইভেন্টটি মানহীন। এই দেখুন । পলি-ফিল ছাড়া এটি ব্যবহার করার পরামর্শ দেব না।

— স্টারহাউস

Answer 2

বাঁধুন searchসার্চ বক্সে -event যেমন below- দেওয়া

$('input[type=search]').on('search', function () {
    // search logic here
    // this function will be executed on click of X (clear button)
});

Comments

এটি যারা অনিশ্চিত তাদের সঠিক উত্তর

— এরিক গ্রসকুর্থ

Chrome এ সমর্থিত কোনও অনুসন্ধান ইভেন্ট রয়েছে তা জেনে রাখা ভাল, তবে আইই বা এফএফ সমর্থন করে না এবং এমডিএন অনুসারে এটি একটি মানসম্মত বৈশিষ্ট্য নয় মানক ট্র্যাকটিতে নয়। বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস / ডকস / ওয়েবে / ইভেন্টস / অনুসন্ধান

Answer 3

আমি একটি "প্রয়াত" উত্তর যোগ করতে চাই, কারণ আমি সঙ্গে লড়াই change, keyupএবং searchআজ, এবং হয়ত আমি শেষ পাওয়া খুব অন্যদের জন্য দরকারী হতে পারে। মূলত, আমার কাছে সন্ধানের মতো টাইপ প্যানেল রয়েছে এবং আমি কেবলমাত্র ছোট্ট X টিপে (ক্রোম এবং অপেরার অধীনে, এফএফ এটি প্রয়োগ করে না) সঠিকভাবে প্রতিক্রিয়া জানাতে চেয়েছিলাম এবং ফলস্বরূপ একটি সামগ্রীর ফলক পরিষ্কার করতে চাই।

আমার এই কোডটি ছিল:

 $(some-input).keyup(function() { 
    // update panel
 }
 $(some-input).change(function() { 
    // update panel
 }
 $(some-input).on("search", function() { 
    // update panel
 }

(এগুলি পৃথক কারণ আমি কখন এবং কোন পরিস্থিতিতে প্রত্যেককে ডাকা হয়েছিল তা যাচাই করতে চেয়েছিলাম)।

দেখা যাচ্ছে যে ক্রোম এবং ফায়ারফক্স আলাদাভাবে প্রতিক্রিয়া দেখায়। বিশেষত, ফায়ারফক্স change" ইনপুটটিতে প্রতিটি পরিবর্তন" হিসাবে বিবেচনা করে, যখন ক্রোম এটিকে "ফোকাস হারিয়ে ফেললে এবং সামগ্রী পরিবর্তন করা হয়" হিসাবে বিবেচনা করে। সুতরাং, Chrome এ "আপডেট প্যানেল" ফাংশন একবার, প্রতিটি কী-স্ট্রোকের জন্য এফএফ-তে একবার ডাকা হয়েছিল (একটিতে keyup, একটিতে change)

অতিরিক্তভাবে, ছোট এক্স (যা এফএফ এর অধীনে উপস্থিত নেই) দিয়ে ক্ষেত্রটি সাফ searchকরা ক্রোমের অধীনে ইভেন্টটিকে বহিস্কার করেছে : না keyup, না change।

উপসংহার? inputপরিবর্তে ব্যবহার করুন:

 $(some-input).on("input", function() { 
    // update panel
 }

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

Comments

আপনাকে ধন্যবাদ লরেঞ্জো ... এটি খুব সহায়ক ছিল।

— স্টার্লিং বোর্ন

দুর্দান্ত, কেবল দুর্দান্ত। অনেক ধন্যবাদ আমাকে এটি বের করার চেষ্টা করে সময় সাশ্রয় করেছে।

— ব্যবহারকারী 2029541

মনে হচ্ছে ফায়ারফক্স তার আচরণ পরিবর্তন করে? আমি ফায়ারফক্স ৪২.০ দিয়ে পরীক্ষা করেছি এবং এটি changeইভেন্টটিকে ঠিক ক্রোমের মতোই আচরণ করে , কেবল প্রবেশ বা ফোকাস হারিয়ে ফায়ার করে।

— সুজানা

আমি ইনপুট বিকল্পটি পছন্দ করি ... সুন্দর!

— ক্যাম তুলোস

Answer 4

পউনের প্রতিক্রিয়া ব্যবহার করা, এটি বেশিরভাগ ক্ষেত্রেই সম্ভব। যাত্রা।

<head>
    <script type="text/javascript">
        function OnSearch(input) {
            if(input.value == "") {
                alert("You either clicked the X or you searched for nothing.");
            }
            else {
                alert("You searched for " + input.value);
            }
        }
    </script>
</head>
<body>
    Please specify the text you want to find and press ENTER!
    <input type="search" name="search" onsearch="OnSearch(this)"/>
</body>

Comments

আমার জন্য, changeইভেন্টটি blurমূলত অবধি আগমন করে না । কেবল (x)ক্রোমের অনুসন্ধান ক্ষেত্রের অভ্যন্তরে ক্লিক করা আমার জন্য কোনও ইভেন্টের আগুন জ্বলবে বলে মনে হচ্ছে না। আরও তদন্তের পরে (এবং নীচের মন্তব্যগুলি পড়ার জন্য) আমার clickজন্য কাজ করতে পেলাম । সুতরাং $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });আমার শেষের দিকে কাজ করে

— জ্যানিস

কিন্তু $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });যখন আরম্ভ হবে ইনপুট ক্ষেত্রের মধ্যে ব্যবহারকারী ক্লিক।

— স্কট

Answer 5

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে আমি একই জিনিসটির সন্ধান করছিলাম। অনুসন্ধান বাক্সটি সাফ করার জন্য কখন 'এক্স' ক্লিক করা হয়েছিল তা নির্ধারণ করুন। এখানে উত্তরগুলির কোনওোটাই আমাকে মোটেই সহায়তা করেনি। একটি ঘনিষ্ঠ ছিল তবে এটি প্রভাবিত হয়েছিল যখন ব্যবহারকারী 'এন্টার' বোতামটি চাপলে এটি 'এক্স' ক্লিক করার অনুরূপ ফলাফলটি ছড়িয়ে দেবে।

আমি এই উত্তরটি অন্য একটি পোস্টে পেয়েছি এবং এটি আমার জন্য উপযুক্ত এবং যখন ব্যবহারকারী অনুসন্ধান বাক্সটি সাফ করেন তখনই তা আগুন ধরিয়ে দেয়।

$("input").bind("mouseup", function(e){
   var $input = $(this),
   oldValue = $input.val();

   if (oldValue == "") return;

   // When this event is fired after clicking on the clear button
   // the value is not cleared yet. We have to wait for it.
   setTimeout(function(){
     var newValue = $input.val();

      if (newValue == ""){
         // capture the clear
         $input.trigger("cleared");
      }
    }, 1);
});

Answer 6

এটি আমার কাছে বোধগম্য হয়েছিল যে এক্স ক্লিক করা একটি পরিবর্তন ইভেন্ট হিসাবে গণ্য করা উচিত। আমার যা করা দরকার তা করার জন্য আমার ইতিমধ্যে অন চেঞ্জ ইভেন্টটি ছিল। আমার জন্য তাই স্থির ছিল কেবল এই jQuery লাইনটি করা:

$('#search').click(function(){ $(this).change(); });

Comments

আপনি যদি ক্লিয়ার বোতামটি টিপানো হয় তখন এটি ট্রিগার করতে চান, আপনি নীচে ইনপুটটির মান, আলা জান্নিসের মন্তব্যগুলির জন্য একটি চেকও যুক্ত করতে পারেন: stackoverflow.com/questions/2977023/… if (this.value === "") { ... }

— স্যাম

Answer 7

আপনি ব্রাউজারে এটি অ্যাক্সেস করতে পারেন বলে মনে হচ্ছে না। অনুসন্ধান ইনপুটটি কোকো এনএসএস সার্চফিল্ডের জন্য একটি ওয়েবকিট এইচটিএমএল র‌্যাপার। বাতিল বোতামটি ব্রাউজারের ক্লায়েন্ট কোডের মধ্যে থাকা বলে মনে হচ্ছে যে মোড়ক থেকে কোনও বাহ্যিক রেফারেন্স নেই।

সূত্র:

• http://weblogs.mozillazine.org/hyatt/archives/2004_07.html#005890
• http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#text-state-and-search-state
• http://dev.w3.org/html5/markup/input.search.html#input.search

দেখে মনে হচ্ছে আপনাকে এমন কিছু দিয়ে ক্লিক করে মাউস অবস্থানের মাধ্যমে এটি বের করতে হবে:

$('input[type=search]').bind('click', function(e) {
  var $earch = $(this);
  var offset = $earch.offset();

  if (e.pageX > offset.left + $earch.width() - 16) { // X button 16px wide?
    // your code here
  }
});

Comments

ভাল, যে স্তন্যপান। সম্ভবত আমি প্ল্যান বি নিয়ে যাব, যা একটি ইভেন্ট চালানো হয়েছিল ক্লিক করে ইনপুটটি খালি হলে ক্লিক করুন ... সম্ভবত এটি 25 মিমি টাইমারে রেখে দিন

— জেসন

@ জেসন হ্যাঁ, এবং এক্সটি যেখানে রয়েছে সেদিকে ক্লিক ক্লিক করা হলে আপনি কেবল চালানোর জন্য উপরে বর্ণিত কোডটি ব্যবহার করতে পারেন। আপনি যেমন বলেছিলেন যে ইনপুটটি খালি আছে তা যাচাই করা ছাড়াও যথেষ্ট হবে

— এমভিসিএইচআর

Answer 8

এই পোস্টটি পেয়েছি এবং আমি বুঝতে পারি যে এটি কিছুটা পুরানো, তবে আমি মনে করি আমার একটি উত্তর থাকতে পারে। এটি ক্রস, ব্যাকস্প্যাকিং এবং ESC কী টিপে ক্লিক ক্লিক করে। আমি নিশ্চিত যে এটি সম্ভবত আরও ভাল লেখা যেতে পারে - আমি এখনও জাভাস্ক্রিপ্টে তুলনামূলকভাবে নতুন। এখানে আমি শেষ করে যাচ্ছি - আমি jQuery (v1.6.4) ব্যবহার করছি:

var searchVal = ""; //create a global var to capture the value in the search box, for comparison later
$(document).ready(function() {
  $("input[type=search]").keyup(function(e) {
    if (e.which == 27) {  // catch ESC key and clear input
      $(this).val('');
    }
    if (($(this).val() === "" && searchVal != "") || e.which == 27) {
      // do something
      searchVal = "";
    }
    searchVal = $(this).val();
  });
  $("input[type=search]").click(function() {
    if ($(this).val() != filterVal) {
      // do something
      searchVal = "";
    }
  });
});

Comments

দেখে মনে হচ্ছে ফিল্টারওয়াল সংজ্ঞায়িত হয়নি

— dlsso

Answer 9

এটি চেষ্টা করুন, আশা করি আপনাকে সাহায্য করবে

$("input[name=search-mini]").on("search", function() {
  //do something for search
});

Answer 10

আমি বিশ্বাস করি যে এইমাত্র একমাত্র উত্তর যা এক্স ক্লিক করা হয় কেবল তখনই জ্বলিত হয়।

তবে এটি কিছুটা হ্যাকি এবং গুগেনবার্গের উত্তর বেশিরভাগ মানুষের পক্ষে কাজ করবে।

$('#search-field').on('click', function(){
  $('#search-field').on('search', function(){
    if(!this.value){
      console.log("clicked x");
      // Put code you want to run on clear here
    }
  });
  setTimeout(function() {
    $('#search-field').off('search');
  }, 1);
});

'#search-field'আপনার ইনপুট জন্য jQuery নির্বাচক কোথায় । 'input[type=search]'সমস্ত অনুসন্ধান ইনপুট নির্বাচন করতে ব্যবহার করুন। মাঠে ক্লিকের পরপরই অনুসন্ধানের ইভেন্টের (পউনের উত্তর) পরীক্ষা করে কাজ করে।

Answer 11

সম্পূর্ণ সমাধান এখানে

অনুসন্ধানের এক্স ক্লিক করা হলে এটি অনুসন্ধান সাফ করবে। বা ব্যবহারকারীর প্রবেশের সময় অনুসন্ধান এপি হিট বলবে। এই কোডটি আরও বাড়ানো যেতে পারে এসকে কীপ ইভেন্ট ইভেন্ট ম্যাচারের সাথে। তবে এটি সব করা উচিত।

document.getElementById("userSearch").addEventListener("search", 
function(event){
  if(event.type === "search"){
    if(event.currentTarget.value !== ""){
      hitSearchAjax(event.currentTarget.value);
    }else {
      clearSearchData();  
    }
  }
});

চিয়ার্স।

Answer 12

JS ঘটনা-লুপ উপর ভিত্তি করে, clickস্পষ্ট বাটনে আরম্ভ হবে searchএর ইভেন্টে ইনপুট , প্রত্যাশিত তাই নিচের কোড কাজ করবে:

input.onclick = function(e){
  this._cleared = true
  setTimeout(()=>{
    this._cleared = false
  })
}
input.onsearch = function(e){
  if(this._cleared) {
    console.log('clear button clicked!')
  }
}

উপরের কোড, onclick ইভেন্ট একটি বুক this._cleared = falseঘটনা লুপ কিন্তু ঘটনা হবে সবসময় পরে চালানোonsearch , ঘটনা যাতে আপনি স্কো.মি. পরীক্ষা করতে পারবেন this._clearedকিনা তা নির্ধারণ করতে ব্যবহারকারী এইমাত্র ক্লিক অবস্থা Xবোতাম এবং তারপর একটি আলোড়ন সৃষ্টি onsearchইভেন্ট।

এটি প্রায় সমস্ত শর্তে কাজ করতে পারে , আটকানো পাঠ্যক্রমে , ইনক্রিমেন্টাল অ্যাট্রিবিউট, ENTER / ESC কী প্রেস ইত্যাদি রয়েছে

Answer 13

এটি অর্জনের একটি উপায় এখানে। আপনার এইচটিএমএলে আপনাকে বাড়তি গুণাবলী যুক্ত করতে হবে বা এটি কাজ করবে না।

window.onload = function() {
  var tf = document.getElementById('textField');
  var button = document.getElementById('b');
  button.disabled = true;
  var onKeyChange = function textChange() {
    button.disabled = (tf.value === "") ? true : false;
  }
  tf.addEventListener('keyup', onKeyChange);
  tf.addEventListener('search', onKeyChange);

}

<input id="textField" type="search" placeholder="search" incremental="incremental">
<button id="b">Go!</button>

Answer 14

document.querySelectorAll('input[type=search]').forEach(function (input) {
   input.addEventListener('mouseup', function (e) {
                if (input.value.length > 0) {
                    setTimeout(function () {
                        if (input.value.length === 0) {
                            //do reset action here
                        }
                    }, 5);
                }
            });
}

ECMAScriptT 2016

Answer 15

অনুসন্ধান বা অন্লিক কাজ করে ... তবে আমি যে সমস্যাটি পেয়েছি সেটি পুরানো ব্রাউজারগুলির সাথে ছিল - অনুসন্ধান ব্যর্থ হয়। প্রচুর প্লাগইন (জ্যাকোরি ইউআই স্বতঃসিদ্ধ বা অভিনব ফিল্টার) ব্লার এবং ফোকাস হ্যান্ডলার রয়েছে। এটি একটি স্বতঃপূরণ ইনপুট বাক্সে যুক্ত করা আমার পক্ষে কাজ করেছে (এটি ব্যবহৃত হয়েছে val মূল্য == "" কারণ এটি মূল্যায়ণ করা দ্রুত ছিল)। আপনি যখন 'সামান্য' x টি চাপুন তখন ঝাপসা হয়ে পড়ে ফোকাসটি বক্সে রাখে।

প্রপার্টি চেঞ্জ এবং ইনপুট আইই 10 এবং আইই 8 এবং সেইসাথে অন্যান্য ব্রাউজারগুলির জন্য কাজ করেছে:

$("#INPUTID").on("propertychange input", function(e) { 
    if (this.value == "") $(this).blur().focus(); 
});

ফ্যানসিট্রি ফিল্টার এক্সটেনশনের জন্য, আপনি একটি রিসেট বোতামটি ব্যবহার করতে পারেন এবং এর ক্লিক ইভেন্টটিকে নীচের মত জোর করতে পারেন:

var TheFancyTree = $("#FancyTreeID").fancytree("getTree");

$("input[name=FT_FilterINPUT]").on("propertychange input", function (e) {
    var n,
    leavesOnly = false,
    match = $(this).val();
    // check for the escape key or empty filter
    if (e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === "") {
        $("button#btnResetSearch").click();
        return;
    }

    n = SiteNavTree.filterNodes(function (node) {
        return MatchContainsAll(CleanDiacriticsString(node.title.toLowerCase()), match);
        }, leavesOnly);

    $("button#btnResetSearch").attr("disabled", false);
    $("span#SiteNavMatches").text("(" + n + " matches)");
}).focus();

// handle the reset and check for empty filter field... 
// set the value to trigger the change
$("button#btnResetSearch").click(function (e) {
    if ($("input[name=FT_FilterINPUT]").val() != "")
        $("input[name=FT_FilterINPUT]").val("");
    $("span#SiteNavMatches").text("");
    SiteNavTree.clearFilter();
}).attr("disabled", true);

বেশিরভাগ ব্যবহারের জন্য এটি মানিয়ে নিতে সক্ষম হওয়া উচিত।

Answer 16

টেক্সটফিল্ডের ক্রস বোতামের (এক্স) অনমাসমোভ () বরখাস্ত হয়ে যায়, আমরা কোনও অনুষ্ঠানের জন্য এই ইভেন্টটি ব্যবহার করতে পারি।

<input type="search" class="actInput" id="ruleContact" onkeyup="ruleAdvanceSearch()" placeholder="Search..." onmousemove="ruleAdvanceSearch()"/>