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

2020/10/31 14:02 · javascript ·  · 0评论

在HTML5中,search输入类型显示在右侧,带有一个小的X,它将清除文本框(至少在Chrome中,也许在其他语言中)。除了说根本不检测框何时被单击或进行某种位置单击检测(x位置/ y位置)之外,是否有其他方法可以检测到在Java或jQuery中单击此X的时间?

实际上,每当用户搜索或用户单击“ x”时,都会触发一个“搜索”事件。这一点特别有用,因为它可以理解“增量”属性。

话虽如此,但我不确定是否可以分辨单击“ x”和搜索之间的区别,除非您使用“ onclick” hack。无论哪种方式,希望对您有所帮助。

参考文献:

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

绑定-search事件如下所示,搜索框-

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

我想添加一个“迟到”的答案,因为我挣扎changekeyupsearch今天,也许是我最后发现可能对他人有用的。基本上,我有一个按类型搜索的面板,我只是想对小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下触发该事件:no keyup,no change

结论?input改为使用

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

在我测试的所有浏览器中,它都具有相同的行为,对输入内容的每次更改(使用鼠标进行复制粘贴,自动补全和“ X”)都会做出反应。

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

我知道这是一个老问题,但我一直在寻找类似的东西。确定何时单击“ 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);
});

对我来说,单击X应该算作更改事件。我已经有onChange事件所有设置来执行我需要做的事情。所以对我来说,解决方法是简单地执行以下jQuery行:

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

您似乎无法在浏览器中访问它。搜索输入是可可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
  }
});

完整解决方案在这里

单击搜索x时,这将清除搜索。或在用户按Enter键时调用Search api匹配项。可以使用其他esc keyup事件匹配器进一步扩展此代码。但这应该做得到。

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

干杯。

这是实现这一目标的一种方法。您需要向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>

找到了这篇文章,我知道它有点旧了,但我我可能会有答案。这可以处理在十字架上的单击,退格并按下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 = "";
    }
  });
});

搜索或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过滤器扩展,您可以使用重置按钮并强制其click事件,如下所示:

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

应该能够适应大多数用途。

试试这个,希望对你有帮助

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

我相信这是仅在单击x时才触发的唯一答案。

但是,这有点古怪,古腾堡的答案对大多数人来说都是有效的。

$('#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的答案)即可工作。

基于js的事件循环,clickon clear按钮将触发input上的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键等。

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

在单击TextField十字按钮(X)时,onmousemove()被触发,我们可以使用此事件来调用任何函数。

<input type="search" class="actInput" id="ruleContact" onkeyup="ruleAdvanceSearch()" placeholder="Search..." onmousemove="ruleAdvanceSearch()"/>
本文地址:http://javascript.askforanswer.com/ninruhejianceduisousuo-html5shurudeqingchu.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!