是否有可用於輸入搜索的重置選項的事件？

在HTML5中有一個新的輸入類型'search'。在大多數瀏覽器上，它只是保留給一個簡單的「文本」輸入，但對於基於webkit的瀏覽器，它會添加一些十字來重置輸入。是否有可用於輸入搜索的重置選項的事件？

我希望能夠處理這個問題，是否有這樣的事件？

2010-03-22 Boris Guéry

任何有用的評論？ – 2010-03-22 14:18:58

更多答案在這裏http://stackoverflow.com/questions/2977023/how-do-you-detect-the-clearing-of-a-search-html5-input/35047611#35047611 – dlsso 2016-01-27 20:56:07

不，這是不可能的。這個UI交互是webkit實現的一些優點，但實際上沒有指定。見here。所以，即使可能 - 你不能指望這個UI在Gecko中實現，例如，如果當他們添加type = search的時候。

來源

2010-03-22 15:14:57 miketaylr

這不會是一個問題，我的意思是功能檢測，它會添加一個很好的方式來重置輸入和派發事件的一些事情。 – 2010-03-22 15:18:00

當然。除了沒有檢測到的功能外 - 除非您正在Webkit上進行一些瀏覽器嗅探功能，而檢測type = search功能。但是，請記住，您所描述的功能不存在任何事件，因此它是一個毫無意義的問題。 – miketaylr 2010-03-22 15:55:22

我不知道這是正確的答案，但當用戶使用X按鈕清除輸入時，會調用click事件處理程序。

$('input[type="search"]').click(function(event) { 
    // This code runs anytime a user clicks on the input, 
    // including when they clear it using the X button. 
})

來源

2010-07-24 01:40:25 jpwatts

問題是我們沒有辦法知道用戶是否實際上點擊十字來清理他的輸入或編輯它。 – 2010-08-01 20:07:50

我同意鮑里斯。另外，請注意：當IE 10點擊新的X按鈕時，IE 10似乎不會觸發「點擊」事件 - 只是鼠標懸停和鼠標移動。即使在mouseup被觸發後，該值仍然沒有被更改爲空。 – 2013-09-06 01:14:52

看來miketaylr是正確的，它不可能趕上這個事件。請參閱此問題的答案：How do you detect the clearing of a "search" HTML5 input?

爲了符合標準並且不依賴於一個佈局引擎的一個功能，我建議您在onChange事件中運行您的代碼（如果新文本值爲空）。

來源

2010-08-31 08:28:45 n0nick

更改事件僅在文本輸入失去焦點後觸發：如果您正在逐步更新任何內容，用戶將希望在單擊X按鈕後立即更新它，而不是等到焦點丟失。 – 2013-09-06 01:18:22

本頁面：http://css-tricks.com/webkit-html5-search-inputs/從纔算是Ajax提到評論：

也有一些自定義的事件來說 - 比如「搜索」的時候觸發當用戶暫停輸入（設定「增量」爲true）。

當測試時，我發現這個'搜索'事件也被調用，當輸入被清除（至少在最新版本的Safari）。

來源

2012-03-13 18:49:20

謝謝，這工作！ :-) – Neal 2012-10-18 17:08:35

單擊「MS Edge」中的「x」時，只會觸發「輸入」事件。 – Mottie 2016-01-15 03:56:29

您可以添加一個條件來檢查搜索字段的內容是否爲空，但即使發生超時也不行，因爲它先運行代碼，然後清除該框。另一個問題是，當您編輯字段時，代碼不會對關閉按鈕做出反應

來源

2013-07-25 15:47:44

您也可以偵聽「輸入」事件，這比「搜索」事件更通用，但仍能捕獲重置選項。

來源

2013-08-02 17:17:58

-1

試試這個，希望幫助您

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

來源

2015-12-23 04:49:15

我不知道，如果仍然有人正在尋找一個解決方案。但是下面的代碼片段/技巧爲我工作。 CSS完成隱藏明確（X）圖標，如果你不想隱藏明確（X）圖標但是需要處理那麼JS代碼片段會有所幫助。

CSS技巧：

#textFieldId::-ms-clear {display: none;} - 對於一個特定的文本字段

或

input[type=text]::-ms-clear { display: none; } - 在範圍內的所有文本字段

JavaScript技巧（將文本字段值重置爲空/空白並觸發html事件KeyUp。因此，你可以根據你的需要改變）

$('#textFieldId').bind("mouseup", function() { 
     var $input = $(this); 
     var oldValue = $input.val(); 
     if (oldValue == "") { 
      return; 
     } 
     setTimeout(function() { 
      var newValue = $input.val(); 
      if (newValue == "") { 
       $input.trigger("keyup"); 
      } 
     }, 1); 
    });

來源

2016-10-10 13:21:09

是否有可用於輸入搜索的重置選項的事件？

回答

相關問題