如何检测“搜索”HTML5输入的清除?

在HTML5中，搜索输入类型的右边会出现一个小X，这将清除文本框(至少在Chrome中，可能在其他浏览器中)。是否有一种方法来检测这个X在Javascript或jQuery中被点击，而不是检测盒子被点击或做一些位置点击检测(X -position/y-position)?

当前回答

const inputElement = document.getElementById("input");
let inputValue;
let isSearchCleared = false;
inputElement.addEventListener("input", function (event) {
    if (!event.target.value && inputValue) {
        //Search is cleared
        isSearchCleared = true;
    } else {
        isSearchCleared = false;
    }
    inputValue = event.target.value;
});

2022-03-07 15:57:24

其他回答

你似乎不能在浏览器中访问它。搜索输入是Cocoa 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
  }
});

2010-06-04 20:55: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>

2010-10-17 18:23:18

至少在Chrome中，搜索输入的“X”按钮似乎发出了一种不同的事件。

MDN上还声明可以触发InputEvent或Event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

下面的测试。您将看到文本输入将是一个InputEvent，带有包含输入字符的“data”属性，单击X按钮将发出一个Event类型。

document.querySelector('input[type=search]').addEventListener('input', ev => console.log(ev))

因此，应能区分使用:

if (ev instanceof InputEvent) { ... }

2022-04-24 23:00:21

点击TextField交叉按钮(X) onmousemove()被触发，我们可以使用这个事件来调用任何函数。

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

2016-06-23 12:32:50

基于js的事件循环，点击clear按钮将在输入时触发搜索事件，因此下面的代码将正常工作:

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

上面的代码，点击事件预约了这个。_cleared = false事件循环，但该事件将始终在onsearch事件之后运行，因此您可以稳定地检查this。_cleared状态，以确定用户是否刚刚点击X按钮，然后触发onsearch事件。

这可以在几乎所有的条件下工作，粘贴文本，具有增量属性，ENTER/ESC键按下等。

2017-10-24 04:49:05

如何检测“搜索”HTML5输入的清除?

推荐文章

最新文章

标签