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


154

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


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

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


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

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

जवाबों:


104

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

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

संदर्भ:

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


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

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

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

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

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

59

बाध्य searchखोज बॉक्स -event रूप below- दिया

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

1
यह उन लोगों के लिए सही उत्तर है जो अनिश्चित हैं
एरिक ग्रॉसकरेथ

6
यह जानने के लिए अच्छा है कि Chrome में समर्थित एक खोज ईवेंट है, लेकिन IE या FF में समर्थित नहीं है और MDN के अनुसार यह एक गैर-मानक सुविधा है और मानक ट्रैक पर नहीं है। developer.mozilla.org/en-US/docs/Web/Events/search
रिच फिनाले

50

मैं "देर से" उत्तर जोड़ना चाहता हूं, क्योंकि मैंने संघर्ष किया 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
 }

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


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

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

ऐसा लगता है कि फ़ायरफ़ॉक्स ने अपना व्यवहार बदल दिया है? मैंने फ़ायरफ़ॉक्स 42.0 के साथ परीक्षण किया और यह changeक्रोम की तरह ही घटना का इलाज करता है , केवल दर्ज करें या खोए हुए फ़ोकस पर फायरिंग।
सुजाना

मुझे इनपुट विकल्प पसंद है ... अच्छा!
कैम टुल्लोस

14

पुआन की प्रतिक्रिया का उपयोग करना, यह ज्यादातर संभव है। पूर्व।

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

5
मेरे लिए, changeघटना blurमूल रूप से आग नहीं है । बस (x)क्रोम के खोज क्षेत्र के अंदर क्लिक करने से मेरे लिए किसी भी घटना की आग नहीं लगती। आगे की जांच के बाद (और नीचे टिप्पणी पढ़ने के लिए) मुझे clickमेरे लिए काम करना पड़ा । तो $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });मेरे अंत में काम करता है
Jannis

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

8

मुझे पता है कि यह एक पुराना सवाल है, लेकिन मैं इसी तरह की चीज की तलाश में था। निर्धारित करें कि खोज बॉक्स को खाली करने के लिए '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);
});

5

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

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


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

4

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

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

ऐसा लगता है कि आपको कुछ क्लिक के साथ माउस पोजीशन पर क्लिक करके यह पता लगाना होगा:

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

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

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

1

इस पोस्ट को मिला और मुझे एहसास हुआ कि यह थोड़ा पुराना है, लेकिन मुझे लगता है कि मेरे पास इसका जवाब हो सकता है। यह 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 = "";
    }
  });
});

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


1

मेरा मानना ​​है कि यह एकमात्र उत्तर है जो केवल 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]'सभी खोज इनपुट का चयन करने के लिए उपयोग करें। मैदान पर एक क्लिक के तुरंत बाद एक खोज घटना (पाओन का जवाब) के लिए जाँच करके काम करता है।


1

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

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

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

चीयर्स।


1

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 कुंजी प्रेस आदि है।


1

इसे प्राप्त करने का एक तरीका यहां है। आपको अपने 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>


1
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


0

खोज या ऑन्क्लिक काम करता है ... लेकिन मुझे जो मुद्दा मिला वह पुराने ब्राउज़रों के साथ था - खोज विफल। बहुत सारे प्लगइन्स (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);

अधिकांश उपयोगों के लिए इसे अनुकूलित करने में सक्षम होना चाहिए।


-2

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

<input type="search" class="actInput" id="ruleContact" onkeyup="ruleAdvanceSearch()" placeholder="Search..." onmousemove="ruleAdvanceSearch()"/>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.