คุณตรวจจับการล้างอินพุต "ค้นหา" HTML5 อย่างไร

154

ใน HTML5 searchประเภทการป้อนข้อมูลจะปรากฏขึ้นพร้อม X เล็กน้อยทางด้านขวาที่จะล้างกล่องข้อความ (อย่างน้อยก็ใน Chrome หรือที่อื่น ๆ ) มีวิธีการตรวจสอบเมื่อมีการคลิก X นี้ใน Javascript หรือ jQuery นอกเหนือจากการพูดการตรวจพบเมื่อมีการคลิกที่กล่องทั้งหมดหรือทำตำแหน่งตรวจจับการคลิก (ตำแหน่ง x ตำแหน่ง / y)?

— เจสัน
แหล่งที่มา

ฉันไม่รู้เกี่ยวกับ HTML 5 มาก แต่ไม่มีonchangeเหตุการณ์ใช่ไหม

— Pekka

1

ดีที่คุณสามารถคิดออกถ้าช่องค้นหาจะถูกล้างออกวิธีการที่ แต่ไม่ว่าจะเกิดขึ้นเนื่องจากการคลิกที่ปุ่มที่เทียบกับตัวเลือกและการลบ

— mVChr

มีความเป็นไปได้ที่ซ้ำกันของตัวเลือกการรีเซ็ตสำหรับการค้นหาอินพุทมีเหตุการณ์ใดบ้าง?

— Naftali aka Neal

stackoverflow.com/a/59389615/11973798คำตอบที่เป็นไปได้ตรวจสอบว่าเป็นประโยชน์หรือไม่

— Shubham Khare

คุณควรเพิ่ม

— Burak Öztürk

104

ที่จริงแล้วมีเหตุการณ์ "ค้นหา" ที่ถูกไล่ออกเมื่อใดก็ตามที่ผู้ใช้ค้นหาหรือเมื่อผู้ใช้คลิกที่ "x" สิ่งนี้มีประโยชน์เป็นพิเศษเพราะเข้าใจแอตทริบิวต์ "ส่วนเพิ่ม"

ตอนนี้ต้องบอกว่าฉันไม่แน่ใจว่าคุณสามารถบอกความแตกต่างระหว่างการคลิก "x" และการค้นหาเว้นแต่ว่าคุณใช้แฮ็ค "onclick" หวังว่าสิ่งนี้จะช่วยได้

อ้างอิง:

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

— Pauan
แหล่งที่มา

2

ขอขอบคุณอย่าคิดออกเมื่อมีsearchเหตุการณ์เกิดขึ้นนอกเหนือจากเมื่อคุณคลิกที่ 'x' มันดูเหมือนจะไม่ให้ยิงkeyup, blurหรือเมื่อรูปแบบมันอยู่ในการส่ง แต่สิ่งนี้สมควรที่จะถูกทำเครื่องหมายเป็นคำตอบ

— Maksim Vi

4

เหตุการณ์ควรเริ่มทำงานเมื่อผู้ใช้กดsearch Enterและหากช่องค้นหามีแอincrementalททริบิวมันจะเริ่มทำงานเมื่อผู้ใช้หยุดพิมพ์เป็นครั้งที่สอง

— Pauan

6

FYI: จากการเขียนความคิดเห็นนี้จะใช้งานได้เฉพาะใน Chrome

— Jason

4

IE11 ทริกเกอร์inputเหตุการณ์ แต่ไม่ใช่searchเหตุการณ์

— โจเซฟเลนน็อกซ์

1

เหตุการณ์ "ค้นหา" ไม่เป็นมาตรฐาน ดูนี่สิ ฉันจะไม่แนะนำให้ใช้โดยไม่ต้องเติมโพลี

— rstackhouse

59

ผูก - searchแสดงช่องค้นหาตามที่ระบุด้านล่าง -

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

— Sharad Biradar
แหล่งที่มา

1

นี่เป็นคำตอบที่ถูกต้องสำหรับผู้ที่ไม่แน่ใจ

— Erik Grosskurth

6

เป็นการดีที่ทราบว่ามีเหตุการณ์การค้นหาที่สนับสนุนใน Chrome แต่ไม่รองรับ IE หรือ FF และ MDN เป็นคุณสมบัติที่ไม่ได้มาตรฐานและไม่ได้อยู่ในมาตรฐาน developer.mozilla.org/en-US/docs/Web/Events/search

— Rich Finelli

50

ฉันต้องการที่จะเพิ่ม "ปลาย" คำตอบเพราะผมต่อสู้กับchange, keyupและsearchในวันนี้และบางทีสิ่งที่ผมพบในท้ายที่สุดอาจจะเป็นประโยชน์สำหรับคนอื่น ๆ มากเกินไป โดยทั่วไปฉันมีแผงค้นหาตามประเภทและฉันเพียงต้องการตอบสนองอย่างถูกต้องต่อการกด X เล็กน้อย (ภายใต้ Chrome และ Opera, FF ไม่ได้ใช้งาน) และล้างบานหน้าต่างเนื้อหาเป็นผลลัพธ์

ฉันมีรหัสนี้:

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

(แยกจากกันเพราะฉันต้องการตรวจสอบเวลาและสถานการณ์ที่เรียกแต่ละครั้ง)

ปรากฎว่า Chrome และ Firefox ตอบสนองแตกต่างกัน โดยเฉพาะอย่างยิ่ง Firefox ถือว่าchangeเป็น "ทุกการเปลี่ยนแปลงการป้อนข้อมูล" ในขณะที่ Chrome ถือว่าเป็น "เมื่อการสูญเสียโฟกัสและเนื้อหาที่มีการเปลี่ยนแปลง" ดังนั้นใน Chrome จึงมีการเรียกใช้ฟังก์ชัน "แผงการอัปเดต" หนึ่งครั้งบน FF สองครั้งสำหรับทุกการกดแป้นพิมพ์ (หนึ่งในkeyupหนึ่งในหนึ่งchange)

นอกจากนี้การล้างข้อมูลที่มีขนาดเล็ก X (ซึ่งไม่อยู่ภายใต้ FF) ยิงsearchเหตุการณ์ภายใต้ Chrome: ไม่มีไม่มีkeyupchange

สรุปหรือไม่ ใช้inputแทน:

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

มันทำงานได้กับพฤติกรรมแบบเดียวกันภายใต้เบราว์เซอร์ทั้งหมดที่ฉันทดสอบตอบสนองทุกการเปลี่ยนแปลงในเนื้อหาอินพุต (คัดลอกวางด้วยเมาส์เติมข้อความอัตโนมัติและรวม "X")

— Lorenzo Dematté
แหล่งที่มา

1

ขอบคุณ Lorenzo ... มันมีประโยชน์มาก

— สเตอร์ลิงบอร์

2

เจ๋งมากเลย ขอบคุณมากช่วยให้ฉันมีเวลาที่จะคิดออก

— user2029541

ดูเหมือนว่า Firefox จะเปลี่ยนพฤติกรรมของมันตั้งแต่นั้นมา? ฉันทดสอบกับ Firefox 42.0 และจัดการกับchangeเหตุการณ์เช่นเดียวกับ Chrome ยิงเฉพาะที่ Enter หรือโฟกัสหายไป

— Suzana

ฉันชอบตัวเลือกอินพุต ... ดี!

— Cam Tullos

14

ใช้การตอบสนองของ Pauan เป็นไปได้มากที่สุด อดีต

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

— ggutenberg
แหล่งที่มา

5

สำหรับฉันแล้วchangeเหตุการณ์จะไม่เริ่มจนกว่าจะถึงblurเวลา เพียงคลิกที่(x)ด้านในช่องค้นหาของ Chrome ดูเหมือนว่าจะไม่เปิดเหตุการณ์ให้ฉันเลย หลังจากตรวจสอบเพิ่มเติม(และอ่านความคิดเห็นด้านล่าง)ฉัน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' เพื่อล้างช่องค้นหา ไม่มีคำตอบที่นี่ช่วยฉันเลย มีใครเข้าใกล้ แต่ก็ได้รับผลกระทบเมื่อผู้ใช้กดปุ่ม 'Enter' มันจะเริ่มผลลัพธ์เช่นเดียวกับการคลิกปุ่ม '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);
});

— lostInTheTetons
แหล่งที่มา

5

สำหรับฉันแล้วการคลิกที่ X ควรนับว่าเป็นเหตุการณ์การเปลี่ยนแปลง ฉันมีกิจกรรม onChange แล้วการตั้งค่าทั้งหมดเพื่อทำสิ่งที่ฉันต้องการ ดังนั้นสำหรับฉันการแก้ไขคือทำเพียงแค่บรรทัด jQuery นี้:

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

— Cory Gagliardi
แหล่งที่มา

ถ้าคุณอยากให้เรื่องนี้ทริกเกอร์เมื่อกดปุ่มที่ชัดเจนถูกกดคุณยังสามารถเพิ่มการตรวจสอบสำหรับค่าการป้อนข้อมูลของ Ala คิดเห็น Jannis' ด้านล่าง: stackoverflow.com/questions/2977023/... if (this.value === "") { ... }

— แซม

4

ดูเหมือนคุณจะไม่สามารถเข้าถึงสิ่งนี้ได้ในเบราว์เซอร์ อินพุตการค้นหาเป็นตัวห่อ HTML Webkit สำหรับ Cocoa NSSearchField ดูเหมือนว่าปุ่มยกเลิกจะอยู่ในรหัสไคลเอ็นต์ของเบราว์เซอร์โดยไม่มีการอ้างอิงภายนอกจาก wrapper

แหล่งที่มา:

ดูเหมือนว่าคุณจะต้องคิดออกผ่านตำแหน่งของเมาส์เมื่อคลิกด้วยสิ่งที่ชอบ:

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

— mVChr
แหล่งที่มา

ดีที่ดูด บางทีฉันจะไปกับแผน B ซึ่งเรียกใช้เหตุการณ์ onClick ถ้าอินพุตว่างเปล่าในตอนนี้ ... อาจวางไว้ที่ตัวจับเวลา 25 มิลลิเซคอน

— Jason

@ Jason ใช่แล้วคุณสามารถใช้รหัสที่ฉันวางไว้ด้านบนเพื่อเรียกใช้เฉพาะเมื่อการคลิกเกิดขึ้นในพื้นที่ที่ X อยู่ นอกจากการตรวจสอบว่าอินพุตว่างเปล่าอย่างที่คุณบอกว่าควรจะพอเพียง

— mVChr

1

พบโพสต์นี้และฉันรู้ว่ามันค่อนข้างเก่า แต่ฉันคิดว่าฉันอาจมีคำตอบ สิ่งนี้จะจัดการกับการคลิกบนกากบาทย้อนหลังและกดปุ่ม ESC ฉันแน่ใจว่ามันน่าจะเขียนได้ดีกว่า - ฉันยังค่อนข้างใหม่กับ javascript นี่คือสิ่งที่ฉันทำลงไป - ฉันใช้ 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 = "";
    }
  });
});

— ScottG
แหล่งที่มา

ดูเหมือนว่าจะไม่ได้กำหนดตัว

— กรอง filter

1

ลองนี้หวังว่าจะช่วยคุณ

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

— ดอนซานูราโนะ
แหล่งที่มา

1

ฉันเชื่อว่านี่เป็นคำตอบเดียวที่เกิดขึ้นเฉพาะเมื่อมีการคลิก x

อย่างไรก็ตามมันเป็นเรื่องแฮ็คเล็กน้อยและคำตอบของ gutenberg จะใช้ได้กับคนส่วนใหญ่

$('#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]'เพื่อเลือกอินพุตการค้นหาทั้งหมด ทำงานโดยตรวจสอบเหตุการณ์การค้นหา (คำตอบของ Pauan) ทันทีหลังจากคลิกที่ฟิลด์

— dlsso
แหล่งที่มา

1

โซลูชันเต็มรูปแบบอยู่ที่นี่

สิ่งนี้จะล้างการค้นหาเมื่อมีการคลิกการค้นหา x หรือจะโทรหา api hit เมื่อผู้ใช้กด Enter รหัสนี้สามารถขยายเพิ่มเติมได้ด้วยการจับคู่เหตุการณ์ keyup เหตุการณ์เพิ่มเติม แต่สิ่งนี้ควรทำทั้งหมด

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

ไชโย

— Tarandeep Singh
แหล่งที่มา

1

ขึ้นอยู่กับการวนรอบเหตุการณ์ของ js clickปุ่ม on clear จะทริกเกอร์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กดปุ่ม ฯลฯ

— James Yang
แหล่งที่มา

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>

ขยายตัวอย่างข้อมูล

— Revanth
แหล่งที่มา

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

— realmag777
แหล่งที่มา

0

การค้นหาหรือ onclick ใช้งานได้ ... แต่ปัญหาที่ฉันพบคือเบราว์เซอร์รุ่นเก่า - การค้นหาล้มเหลว ปลั๊กอินจำนวนมาก (ตัวกรองการเติมข้อความอัตโนมัติหรือ jQuery ui fancytree) มีตัวเบลอและโฟกัส การเพิ่มสิ่งนี้ไปยังกล่องใส่ข้อความอัตโนมัติจะใช้งานได้สำหรับฉัน (ใช้ this.value == "" เพราะการประเมินเร็วขึ้น) ความเบลอจากนั้นโฟกัสเก็บเคอร์เซอร์ไว้ในกล่องเมื่อคุณกด 'x' ตัวน้อย

PropertyChange และอินพุตทำงานได้ทั้ง 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);

ควรจะปรับตัวให้เข้ากับการใช้งานส่วนใหญ่

— Richard Dufour
แหล่งที่มา

-2

เมื่อคลิกที่ปุ่มข้าม TextField (X) onmousemove () โดนไล่ออกเราสามารถใช้เหตุการณ์นี้เพื่อเรียกใช้ฟังก์ชันใด ๆ

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

— priyaranjan sahoo
แหล่งที่มา