Làm thế nào để bạn phát hiện việc xóa một đầu vào Tìm kiếm HTML5 của HTML5?

154

Trong HTML5, searchloại đầu vào xuất hiện với một chữ X nhỏ ở bên phải sẽ xóa hộp văn bản (ít nhất là trong Chrome, có thể là các loại khác). Có cách nào để phát hiện khi X này được nhấp vào Javascript hoặc jQuery không, ngoài ra, phát hiện khi hộp được nhấp vào hoặc thực hiện một số loại phát hiện nhấp chuột vị trí (vị trí x / vị trí y)?

— Jason
nguồn

Tôi không biết nhiều về HTML 5, nhưng nó không có onchangesự kiện sao?

— Pekka

1

Chà, bạn có thể biết liệu hộp tìm kiếm có bị xóa theo cách đó không, nhưng liệu nó có xảy ra do nhấp vào nút đó so với lựa chọn và xóa hay không

— mVChr

có thể trùng lặp Có bất kỳ sự kiện nào có sẵn cho tùy chọn đặt lại cho tìm kiếm đầu vào không?

— Naftali aka Neal

Câu trả lời có thể có stackoverflow.com/a/59389615/11973798 kiểm tra xem có giúp được không

— Shubham Khare

bạn nên thêm các sự kiện keyup và tìm kiếm ..

— Burak ztürk

104

Trên thực tế, có một sự kiện "tìm kiếm" được kích hoạt bất cứ khi nào người dùng tìm kiếm hoặc khi người dùng nhấp vào "x". Điều này đặc biệt hữu ích vì nó hiểu thuộc tính "gia tăng".

Bây giờ, đã nói rằng, tôi không chắc liệu bạn có thể cho biết sự khác biệt giữa nhấp vào "x" và tìm kiếm hay không, trừ khi bạn sử dụng hack "onclick". Dù bằng cách nào, hy vọng điều này sẽ giúp.

Người giới thiệu:

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

— Pauan
nguồn

2

Cảm ơn, không thể tìm ra khi nào searchsự kiện xảy ra ngoài khi bạn nhấp vào 'x'. Nó dường như không bắn vào keyup, blurhoặc khi hình thành nó trong được gửi đi. Nhưng điều này xứng đáng được đánh dấu là một câu trả lời.

— Maksim Vi.

4

Sự searchkiện sẽ kích hoạt khi người dùng nhấn Enter. Và nếu hộp tìm kiếm có incrementalthuộc tính, nó cũng sẽ kích hoạt khi người dùng dừng gõ một giây.

— Pauan

6

FYI: kể từ khi viết bình luận này, nó chỉ hoạt động trong Chrome.

— Jason

4

IE11 kích hoạt inputsự kiện nhưng không phải searchsự kiện.

— Joseph Lennox

1

Sự kiện "tìm kiếm" là không chuẩn. Xem này . Tôi sẽ không khuyên bạn nên sử dụng mà không có poly-fill.

— rstackhouse

59

Ràng buộc - searchtìm kiếm hộp tìm kiếm như được đưa ra dưới đây-

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

— Sharad Biradar
nguồn

1

Đây là câu trả lời đúng cho những người không chắc chắn

— Erik Grosskurth 19/03/2016

6

thật tốt khi biết có một sự kiện tìm kiếm được hỗ trợ trong Chrome, nhưng không được hỗ trợ trong IE hoặc FF và theo MDN, đây là một tính năng không chuẩn và không theo dõi tiêu chuẩn. developer.mozilla.org/en-US/docs/Web/Events/search

— Rich Finelli

50

Tôi muốn thêm một câu trả lời "muộn", bởi vì tôi đã vật lộn với change, keyupvà searchhôm nay, và có lẽ những gì tôi tìm thấy cuối cùng cũng có thể hữu ích cho những người khác. Về cơ bản, tôi có bảng điều khiển theo kiểu tìm kiếm và tôi chỉ muốn phản ứng đúng với báo chí của X nhỏ (trong Chrome và Opera, FF không triển khai bảng này) và kết quả là xóa một khung nội dung.

Tôi đã có mã này:

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

(Chúng riêng biệt vì tôi muốn kiểm tra khi nào và trong trường hợp nào được gọi là).

Hóa ra Chrome và Firefox phản ứng khác nhau. Cụ thể, Firefox coi change"mọi thay đổi đối với đầu vào", trong khi Chrome coi đó là "khi mất tiêu điểm VÀ nội dung bị thay đổi". Vì vậy, trên Chrome, chức năng "bảng cập nhật" đã được gọi một lần, trên FF hai lần cho mỗi lần nhấn phím (một trong keyup, một trong change)

Ngoài ra, xóa trường bằng X nhỏ (không có trong FF) đã kích hoạt searchsự kiện trong Chrome: không keyup, không change.

Kết luận? Sử dụng inputthay thế:

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

Nó hoạt động với cùng một hành vi trong tất cả các trình duyệt tôi đã kiểm tra, phản ứng ở mọi thay đổi trong nội dung đầu vào (sao chép-dán bằng chuột, tự động hoàn thành và "X" đi kèm).

— Lorenzo Dematté
nguồn

1

Cảm ơn bạn Lorenzo ... điều này rất hữu ích.

— Sterling Bourne

2

Tuyệt vời, đơn giản là tuyệt vời. Rất cám ơn đã giúp tôi tiết kiệm thời gian để cố gắng tìm ra điều này.

— dùng2029541

Có vẻ như Firefox đã thay đổi hành vi của mình từ khi nào? Tôi đã thử nghiệm với Firefox 42.0 và nó xử lý changesự kiện giống như Chrome, chỉ bắn vào Enter hoặc mất tiêu điểm.

— Suzana

Tôi thích tùy chọn đầu vào ... tốt đẹp!

— Cam Tullos

14

Sử dụng phản ứng của Pauan, hầu như có thể. Ví dụ.

<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
nguồn

5

Đối với tôi, changesự kiện không cháy cho đến khi blurvề cơ bản. Chỉ cần nhấp vào (x)bên trong trường tìm kiếm của Chrome dường như không kích hoạt bất kỳ sự kiện nào đối với tôi. Sau khi điều tra thêm (và đọc các bình luận bên dưới) tôi đã clicklàm việc cho tôi. Vì vậy, $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });hoạt động vào cuối của tôi

— Jannis

2

Nhưng $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });cũng sẽ kích hoạt khi người dùng nhấp vào trường đầu vào.

— Scott

8

Tôi biết đây là một câu hỏi cũ, nhưng tôi đang tìm kiếm điều tương tự. Xác định thời điểm 'X' được nhấp để xóa hộp tìm kiếm. Không có câu trả lời nào ở đây giúp tôi cả. Một cái đã gần nhưng cũng bị ảnh hưởng khi người dùng nhấn nút 'enter', nó sẽ kích hoạt kết quả tương tự như khi nhấp vào 'X'.

Tôi tìm thấy câu trả lời này trên một bài đăng khác và nó hoạt động hoàn hảo đối với tôi và chỉ kích hoạt khi người dùng xóa hộp tìm kiếm.

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

— mấtInTheTetons
nguồn

5

Nó có ý nghĩa với tôi rằng nhấp vào X nên được tính là một sự kiện thay đổi. Tôi đã có sự kiện onChange tất cả các thiết lập để làm những gì tôi cần nó làm. Vì vậy, đối với tôi, cách khắc phục chỉ đơn giản là thực hiện dòng jQuery này:

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

— Cory Gagliardi
nguồn

Nếu bạn muốn điều này kích hoạt khi nhấn nút xóa, bạn cũng có thể thêm kiểm tra giá trị của đầu vào, bình luận của ala Jannis bên dưới: stackoverflow.com/questions/2977023/iêu if (this.value === "") { ... }

— Sam

4

Dường như bạn không thể truy cập cái này trong trình duyệt. Đầu vào tìm kiếm là một trình bao bọc HTML Webkit cho Ca cao NSSearchField. Nút hủy dường như được chứa trong mã máy khách của trình duyệt mà không có tham chiếu bên ngoài nào có sẵn từ trình bao bọc.

Nguồn:

Có vẻ như bạn sẽ phải tìm ra nó thông qua vị trí chuột khi nhấp bằng một cái gì đó như:

$('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
nguồn

tốt, đó là hút. có lẽ tôi sẽ đi với kế hoạch B, đã tổ chức một sự kiện trên Click nếu đầu vào hiện đang trống ... có thể đặt nó vào đồng hồ bấm giờ 25ms

— Jason

@Jason yeah, và bạn có thể sử dụng mã tôi đặt ở trên để chỉ chạy nó nếu nhấp chuột xảy ra trong khu vực có X. Điều đó ngoài việc kiểm tra xem đầu vào có trống như bạn đã nói hay không

— mVChr

1

Tìm thấy bài đăng này và tôi nhận ra nó hơi cũ, nhưng tôi nghĩ rằng tôi có thể có một câu trả lời. Thao tác này xử lý nhấp chuột vào chữ thập, khoảng cách và nhấn phím ESC. Tôi chắc chắn rằng nó có thể được viết tốt hơn - tôi vẫn còn khá mới đối với javascript. Đây là những gì tôi đã làm - Tôi đang sử dụng 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
nguồn

Có vẻ như bộ lọcVal không được xác định

— dlsso

1

Hãy thử điều này, hy vọng giúp bạn

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

— Don Zanurano
nguồn

1

Tôi tin rằng đây là câu trả lời duy nhất kích hoạt CHỈ khi nhấp vào x.

Tuy nhiên, đó là một chút hack và câu trả lời của ggutenberg sẽ làm việc cho hầu hết mọi người.

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

Trường hợp '#search-field'là bộ chọn jQuery cho đầu vào của bạn. Sử dụng 'input[type=search]'để chọn tất cả các đầu vào tìm kiếm. Hoạt động bằng cách kiểm tra sự kiện tìm kiếm (câu trả lời của Pauan) ngay sau khi nhấp vào trường.

— dlsso
nguồn

1

Giải pháp đầy đủ có ở đây

Điều này sẽ xóa tìm kiếm khi nhấp vào tìm kiếm x. hoặc sẽ gọi api tìm kiếm nhấn khi người dùng nhấn enter. mã này có thể được mở rộng thêm với trình so khớp sự kiện esc keyup bổ sung. nhưng điều này nên làm tất cả

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

Chúc mừng.

— Tarandeep Singh
nguồn

1

dựa trên vòng lặp sự kiện của js, clicknút xóa sẽ kích hoạt searchsự kiện trên đầu vào , vì vậy mã bên dưới sẽ hoạt động như mong đợi:

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

Đoạn mã trên, onclick sự kiện đặt một this._cleared = falsevòng lặp sự kiện, nhưng sự kiện này sẽ luôn chạy sau khi các onsearchsự kiện, vì vậy bạn có thể kiểm tra ổn định các this._clearedtrạng thái để xác định xem người dùng chỉ cần nhấp vào Xnút và sau đó gây ra một onsearchsự kiện.

Điều này có thể hoạt động trên hầu hết tất cả các điều kiện , dán văn bản , có thuộc tính gia tăng , nhấn phím ENTER / ESC, v.v.

— James Dương
nguồn

1

Đây là một cách để đạt được điều này. Bạn cần thêm thuộc tính gia tăng vào html của mình nếu không nó sẽ không hoạt động.

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>

Mở rộng đoạn trích

— Revanth
nguồn

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
nguồn

0

Tìm kiếm hoặc onclick hoạt động ... nhưng vấn đề tôi tìm thấy là với các trình duyệt cũ hơn - tìm kiếm thất bại. Rất nhiều plugin (bộ lọc tự động jquery ui hoặc bộ lọc Fancytree) có trình xử lý mờ và tập trung. Thêm phần này vào hộp nhập tự động hoàn thành làm việc cho tôi (đã sử dụng this.value == "" vì nó nhanh hơn để đánh giá). Làm mờ sau đó lấy nét giữ con trỏ trong hộp khi bạn nhấn 'x' nhỏ.

PropertyChange và đầu vào hoạt động cho cả IE 10 và IE 8 cũng như các trình duyệt khác:

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

Đối với tiện ích mở rộng bộ lọc FancyTree, bạn có thể sử dụng nút đặt lại và buộc sự kiện nhấp chuột như sau:

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

Nên có thể thích ứng điều này cho hầu hết các sử dụng.

— Richard Dufour
nguồn

-2

Khi nhấp vào nút chéo TextField (X), onmousemove () bị bắn, chúng ta có thể sử dụng sự kiện này để gọi bất kỳ chức năng nào.

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

— ưu tiên
nguồn