आप "खोज" HTML5 इनपुट के समाशोधन का पता कैसे लगाते हैं?

Question

एचटीएमएल 5 में, searchइनपुट प्रकार दाईं ओर थोड़ा एक्स के साथ दिखाई देता है जो टेक्स्टबॉक्स (कम से कम क्रोम में, शायद अन्य) को साफ कर देगा। क्या यह पता लगाने का कोई तरीका है कि इस एक्स को जावास्क्रिप्ट या jQuery के अलावा किसी अन्य बॉक्स में क्लिक किया गया है या नहीं, यह पता लगाने के लिए कि बॉक्स पर क्लिक किया गया है या किसी प्रकार का स्थान क्लिक-डिटेक्टिंग (x-position / y-position) कर रहा है?

Comments

मुझे HTML 5 के बारे में ज्यादा जानकारी नहीं है, लेकिन क्या यह एक onchangeघटना नहीं है?

— पकाका

ठीक है, आप यह पता लगा सकते हैं कि क्या खोज बॉक्स को इस तरह से साफ़ किया गया है, लेकिन यह नहीं कि क्या यह बटन बनाम चयन और विलोपन पर क्लिक करने के कारण हुआ है

— mVChr

संभावित डुप्लिकेट क्या इनपुट खोज के लिए रीसेट विकल्प के लिए कोई घटना उपलब्ध है?

— नफतली उर्फ ​​नील

संभव उत्तर stackoverflow.com/a/59389615/11973798 अगर यह मदद करता है की जाँच करें

— शुभम खरे

आपको कीप और खोज की घटनाओं को जोड़ना चाहिए ..

— Burak

Answer 1

दरअसल, एक "खोज" घटना है जिसे जब भी उपयोगकर्ता खोजता है, या जब उपयोगकर्ता "x" पर क्लिक करता है, तो निकाल दिया जाता है। यह विशेष रूप से उपयोगी है क्योंकि यह "वृद्धिशील" विशेषता को समझता है।

अब, यह कहते हुए कि, मुझे यकीन नहीं है कि आप "x" पर क्लिक करने और खोज करने के बीच का अंतर बता सकते हैं, जब तक कि आप "onclick" हैक का उपयोग न करें। किसी भी तरह, उम्मीद है कि यह मदद करता है।

संदर्भ:

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

Comments

धन्यवाद, यह पता नहीं लगा सकते हैं कि searchजब आप 'x' पर क्लिक करते हैं तो घटना के अलावा क्या होता है। ऐसा लगता नहीं है कि आग लगी है keyup, blurया जब यह रूप में प्रस्तुत किया जाता है। लेकिन यह एक जवाब के रूप में चिह्नित किया जाना चाहिए।

— मक्सीम वी।

searchघटना सक्रिय किया जाना चाहिए जब उपयोगकर्ता प्रेस Enter। और अगर खोज बॉक्स में incrementalविशेषता है, तो यह तब भी फायर करेगा जब उपयोगकर्ता दूसरे के लिए लिखना बंद कर देगा।

— पौआन

FYI करें: इस टिप्पणी के लेखन के रूप में, यह केवल क्रोम में काम करता है।

— जेसन

IE11 inputइवेंट को ट्रिगर करता है लेकिन ईवेंट को नहीं search।

— जोसेफ लेनोक्स

"खोज" घटना गैर-मानक है। देखें इस । मैं यह सलाह नहीं दूंगा कि यह पॉली-फिल के बिना उपयोग हो।

— rstackhouse

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 में समर्थित एक खोज ईवेंट है, लेकिन IE या FF में समर्थित नहीं है और MDN के अनुसार यह एक गैर-मानक सुविधा है और मानक ट्रैक पर नहीं है। developer.mozilla.org/en-US/docs/Web/Events/search

— रिच फिनाले

Answer 3

मैं "देर से" उत्तर जोड़ना चाहता हूं, क्योंकि मैंने संघर्ष किया change, keyupऔर searchआज, और शायद जो मुझे अंत में मिला वह दूसरों के लिए भी उपयोगी हो सकता है। मूल रूप से, मेरे पास एक खोज-प्रकार-प्रकार का पैनल है, और मैं बस छोटे एक्स (क्रोम और ओपेरा के तहत, एफएफ इसे लागू नहीं करता है) के प्रेस पर ठीक से प्रतिक्रिया करना चाहता था, और परिणामस्वरूप सामग्री फलक को साफ़ करें।

मेरे पास यह कोड था:

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

(वे अलग हैं क्योंकि मैं जाँच करना चाहता था कि कब और किन परिस्थितियों में प्रत्येक को बुलाया गया था)।

यह पता चला है कि क्रोम और फ़ायरफ़ॉक्स अलग-अलग प्रतिक्रिया करते हैं। विशेष रूप से, फ़ायरफ़ॉक्स change"इनपुट में हर परिवर्तन" के रूप में व्यवहार करता है , जबकि क्रोम इसे "जब फोकस खो जाता है और सामग्री बदल जाती है" के रूप में मानता है। इसलिए, क्रोम पर "अपडेट पैनल" फ़ंक्शन को एक बार बुलाया गया था, एफएफ पर प्रत्येक कीस्ट्रोक के लिए दो बार (एक में keyup, एक में change)

इसके अतिरिक्त, छोटे X (जो FF के तहत मौजूद नहीं है) के साथ फ़ील्ड को साफ़ करते हुए searchChrome: नहीं keyup, नहीं के तहत ईवेंट को निकाल दिया गया change।

निष्कर्ष? inputइसके बजाय उपयोग करें :

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

यह मेरे द्वारा परीक्षण किए गए सभी ब्राउज़रों के तहत समान व्यवहार के साथ काम करता है, इनपुट सामग्री में हर बदलाव (माउस के साथ कॉपी-पेस्ट, स्वतः पूर्णता और "एक्स" शामिल है) पर प्रतिक्रिया करता है।

Comments

धन्यवाद लोरेंजो ... यह बहुत मददगार था।

— स्टर्लिंग बॉर्न

बहुत बढ़िया, बस कमाल। बहुत धन्यवाद मुझे इस एक को जानने की कोशिश में समय बचाया।

— user2029541

ऐसा लगता है कि फ़ायरफ़ॉक्स ने अपना व्यवहार बदल दिया है? मैंने फ़ायरफ़ॉक्स 42.0 के साथ परीक्षण किया और यह 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!} });मेरे अंत में काम करता है

— Jannis

लेकिन $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });जब उपयोगकर्ता इनपुट क्षेत्र में क्लिक करता है तो ट्रिगर भी होगा।

— स्कॉट

Answer 5

मुझे पता है कि यह एक पुराना सवाल है, लेकिन मैं इसी तरह की चीज की तलाश में था। निर्धारित करें कि खोज बॉक्स को खाली करने के लिए 'X' पर क्लिक किया गया था। यहाँ किसी भी उत्तर ने मेरी मदद नहीं की। एक पास था लेकिन यह भी प्रभावित हुआ जब उपयोगकर्ता ने 'एंटर' बटन दबाया, तो यह उसी परिणाम को आग लगा देगा जैसे 'एक्स' पर क्लिक करने पर होता है।

मुझे यह उत्तर एक और पोस्ट पर मिला और यह मेरे लिए एकदम सही है और केवल तभी फायर करता है जब उपयोगकर्ता खोज बॉक्स को साफ़ करता है।

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

यह मेरे लिए समझ में आया कि एक्स पर क्लिक करने को एक परिवर्तन घटना के रूप में गिना जाना चाहिए। मेरे पास पहले से ही onChange इवेंट सभी सेटअप करने के लिए था जो मुझे करने की आवश्यकता थी। तो मेरे लिए, तय यह बस jQuery लाइन करना था:

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

Comments

यदि आप चाहते हैं कि जब स्पष्ट बटन दबाया जाए तो आप इसे ट्रिगर कर सकते हैं, आप इनपुट के मूल्य के लिए एक चेक भी जोड़ सकते हैं, अला जनीस की टिप्पणी नीचे: stackoverflow.com/questions/2977023/… if (this.value === "") { ... }

— सैम

Answer 7

ऐसा नहीं लगता कि आप इसे ब्राउज़र में एक्सेस कर सकते हैं। कोको NSSearchField के लिए खोज इनपुट एक Webkit HTML आवरण है। रद्द करने वाला बटन ब्राउज़र क्लाइंट कोड में शामिल होता है, जिसमें रैपर से कोई बाहरी संदर्भ उपलब्ध नहीं होता है।

सूत्रों का कहना है:

• 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

खैर, यह बेकार है। शायद मैं प्लान बी के साथ जाऊंगा, जो एक घटना पर चलाया गया था अगर इनपुट अब खाली है ... शायद इसे 25ms टाइमर पर रखा जाए

— जेसन

@ जेसन हाँ, और आप उस कोड का उपयोग कर सकते हैं, जो केवल एक्स को चलाने के लिए होता है यदि एक्स उस क्षेत्र में होता है जहां एक्स है। यह जाँचने के अलावा कि इनपुट खाली है, जैसा कि आपने कहा था कि पर्याप्त होना चाहिए

— mVChr

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

ऐसा लगता है कि FilterVal को परिभाषित नहीं किया गया है

— dlsso

Answer 9

यह कोशिश करो, आशा है कि आप मदद करते हैं

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

Answer 10

मेरा मानना ​​है कि यह एकमात्र उत्तर है जो केवल x क्लिक किए जाने पर ही फायर करता है।

हालांकि, यह थोड़ा हैकेटी है और ggutenberg का जवाब ज्यादातर लोगों के लिए काम करेगा।

$('#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

पूरा समाधान यहाँ है

जब खोज x पर क्लिक किया जाएगा तो यह खोज को साफ़ कर देगा। या जब उपयोगकर्ता हिट दर्ज करता है, तो आप एपीआई हिट को कॉल करेंगे। इस कोड को अतिरिक्त esc कीअप इवेंट मैचर के साथ आगे बढ़ाया जा सकता है। लेकिन यह सब करना चाहिए।

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

इसे प्राप्त करने का एक तरीका यहां है। आपको अपने html में वृद्धिशील विशेषता जोड़ने की आवश्यकता है या यह काम नहीं करेगा।

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

ECMASCRIPT 2016

Answer 15

खोज या ऑन्क्लिक काम करता है ... लेकिन मुझे जो मुद्दा मिला वह पुराने ब्राउज़रों के साथ था - खोज विफल। बहुत सारे प्लगइन्स (jquery ui स्वतः पूर्ण या fancytree फ़िल्टर) में धब्बा और फोकस हैंडलर हैं। इसे एक स्वतः पूर्ण इनपुट बॉक्स में जोड़ना मेरे लिए काम करता था (इसका उपयोग किया जाता है। इस प्रकार == "" क्योंकि इसका मूल्यांकन करना तेज़ था)। जब आप छोटे 'x' से टकराते हैं तो धब्बा फ़ोकस में कर्सर को ध्यान में रखता है।

प्रॉपर्टीचेंज और इनपुट दोनों IE 10 और IE 8 और साथ ही अन्य ब्राउज़रों के लिए काम करते हैं:

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

FancyTree फ़िल्टर एक्सटेंशन के लिए, आप एक रीसेट बटन का उपयोग कर सकते हैं और इसे इस प्रकार क्लिक कर सकते हैं:

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

TextField क्रॉस बटन (X) onmousemove () पर क्लिक करने पर निकाल दिया जाता है, हम इस फ़ंक्शन का उपयोग किसी भी फ़ंक्शन को कॉल करने के लिए कर सकते हैं।

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