Como você detecta a limpeza de uma entrada HTML5 de "pesquisa"?

154

No HTML5, o searchtipo de entrada aparece com um pequeno X à direita que limpa a caixa de texto (pelo menos no Chrome, talvez outros). Existe uma maneira de detectar quando esse X é clicado em Javascript ou jQuery, além de, digamos, detectar quando a caixa é clicada ou fazer algum tipo de localização de detecção de cliques (posição x / posição y)?

javascript jquery html events dom-events Jason
fonte

Não sei muito sobre HTML 5, mas ele não tem um onchangeevento?

Pekka

1

Bem, você pode descobrir se a caixa de pesquisa é eliminado dessa maneira, mas não se ocorreu devido ao clicar nesse botão vs selecção e exclusão

mVChr

possível duplicata de Existe algum evento disponível para a opção de redefinição para pesquisa de entrada?

Naftali aka Neal

Resposta possível stackoverflow.com/a/59389615/11973798 verifique se ajuda

Shubham Khare

você deve adicionar eventos de keyup e search ..

Burak Öztürk

104

Na verdade, há um evento de "pesquisa" que é acionado sempre que o usuário pesquisa ou quando o usuário clica no "x". Isso é especialmente útil porque compreende o atributo "incremental".

Agora, tendo dito isso, não tenho certeza se você sabe a diferença entre clicar no "x" e pesquisar, a menos que use um hack "onclick". De qualquer maneira, espero que isso ajude.

Referências:

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

Pauan
fonte

2

Obrigado, não é possível descobrir quando o searchevento acontece, exceto quando você clica no 'x'. Não parece a disparar contra keyup, blurou quando formarem está em é submetido. Mas isso merece ser marcado como resposta.

Maksim Vi.

4

O searchevento deve disparar quando o usuário pressionar Enter. E se a caixa de pesquisa tiver o incrementalatributo, ela também será acionada quando o usuário parar de digitar por um segundo.

Pauan

6

FYI: no momento da redação deste comentário, isso só funciona no Chrome.

Jason

4

O IE11 aciona o inputevento, mas não o searchevento.

Joseph Lennox

1

O evento "search" não é padrão. Veja isso . Eu não recomendaria o seu uso sem um preenchimento poli.

Rtackhouse

59

Vincule - searchevite a caixa de pesquisa conforme indicado abaixo -

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

Sharad Biradar
fonte

1

Esta é a resposta correta para aqueles que não tem certeza

Erik Grosskurth

6

É bom saber que há um evento de pesquisa suportado no Chrome, mas não no IE ou FF e, de acordo com o MDN, esse é um recurso não padrão e não está na faixa de padrões. developer.mozilla.org/pt-BR/docs/Web/Events/search

Rich Finelli

50

Quero adicionar uma resposta "tardia", porque lutei com change, keyupe searchhoje, e talvez o que encontrei no final também possa ser útil para outras pessoas. Basicamente, tenho um painel de pesquisa como tipo e só queria reagir adequadamente à pressão do pequeno X (no Chrome e Opera, o FF não o implementa) e limpar um painel de conteúdo como resultado.

Eu tinha esse código:

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

(Eles são separados porque eu queria verificar quando e sob quais circunstâncias cada um foi chamado).

Acontece que o Chrome e o Firefox reagem de maneira diferente. Em particular, o Firefox trata changecomo "todas as alterações na entrada", enquanto o Chrome trata como "quando o foco é perdido E o conteúdo é alterado". Portanto, no Chrome, a função "painel de atualização" foi chamada uma vez, no FF duas vezes para cada pressionamento de tecla (uma em keyupuma change)

Além disso, limpar o campo com o pequeno X (que não está presente no FF) disparou o search evento no Chrome: não keyup, não change.

A conclusão? Usarinput vez disso:

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

Ele funciona com o mesmo comportamento em todos os navegadores que testei, reagindo a cada alteração no conteúdo de entrada (copiar e colar com o mouse, preenchimento automático e "X" incluídos).

Lorenzo Dematté
fonte

1

Obrigado Lorenzo ... isso foi muito útil.

Sterling Bourne

2

Incrível, simplesmente incrível. Muito obrigado me poupou tempo tentando descobrir isso.

user2029541

Parece que o Firefox mudou seu comportamento desde então? Eu testei com o Firefox 42.0 e trata o changeevento como o Chrome, disparando apenas no Enter ou no foco perdido.

Suzana

Eu gosto da opção de entrada ... legal!

Cam Tullos

14

Usando a resposta de Pauan, é quase sempre possível. Ex.

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

5

Para mim, o changeevento não é acionado até blurbasicamente. Simplesmente clicar no (x)interior do campo de pesquisa do Chrome não parece disparar nenhum evento para mim. Após uma investigação mais aprofundada (e lendo os comentários abaixo) , comecei clicka trabalhar para mim. Portanto, $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });funciona do meu lado #

Jannis '

2

Mas $("input[type='search']").bind('click', function(e) { if ( this.value=="") {//this just cleared!} });também seria acionado quando o usuário clicar no campo de entrada.

Scott

8

Sei que essa é uma pergunta antiga, mas estava procurando a mesma coisa. Determine quando o 'X' foi clicado para limpar a caixa de pesquisa. Nenhuma das respostas aqui me ajudou em tudo. Um estava próximo, mas também foi afetado quando o usuário pressionou o botão 'enter', o mesmo resultado seria acionado ao clicar no 'X'.

Encontrei esta resposta em outro post e ela funciona perfeita para mim e só é acionada quando o usuário limpa a caixa de pesquisa.

$("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
fonte

5

Fazia sentido para mim que clicar no X deveria contar como um evento de mudança. Eu já tinha o evento onChange configurado para fazer o que eu precisava. Então, para mim, a correção era simplesmente fazer esta linha do jQuery:

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

Cory Gagliardi
fonte

Se você deseja que isso seja acionado quando o botão limpar é pressionado, você também pode adicionar uma verificação do valor da entrada, conforme o comentário de Jannis abaixo: stackoverflow.com/questions/2977023/… if (this.value === "") { ... }

Sam

4

Não parece que você possa acessar isso no navegador. A entrada de pesquisa é um wrapper HTML do Webkit para o Cocoa NSSearchField. O botão Cancelar parece estar contido no código do cliente do navegador, sem referência externa disponível no wrapper.

Fontes:

Parece que você terá que descobrir através da posição do mouse no clique com algo como:

$('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
fonte

bem, isso é péssimo. Talvez eu vá com o plano B, que foi executado um evento onClick se a entrada está agora vazia ... talvez colocá-lo em um temporizador 25ms

Jason

@ Jason sim, e você pode usar o código que eu coloquei acima para executá-lo apenas se o clique ocorrer na área onde o X está. Que, além de verificar se a entrada está vazia como você disse deve ser suficiente

mVChr

1

Encontrei este post e percebo que é um pouco antigo, mas acho que posso ter uma resposta. Isso lida com o clique na cruz, retrocedendo e pressionando a tecla ESC. Tenho certeza de que provavelmente poderia ser melhor escrito - ainda sou relativamente novo em javascript. Aqui está o que eu acabei fazendo - estou usando o 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
fonte

Parece que filterVal não está definido

dlsso

1

tente isso, espero ajudá-lo

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

Don Zanurano
fonte

1

Acredito que esta é a única resposta que é acionada APENAS quando o x é clicado.

No entanto, é um pouco hacky e a resposta de Ggutenberg funcionará para a maioria das pessoas.

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

Onde '#search-field'está o seletor jQuery para sua entrada. Use 'input[type=search]'para selecionar todas as entradas de pesquisa. Funciona verificando um evento de pesquisa (resposta de Pauan) imediatamente após um clique no campo.

dlsso
fonte

1

A solução completa está aqui

Isso limpará a pesquisa quando a pesquisa x for clicada. ou chamará a api de pesquisa pressionada quando o usuário pressionar enter. esse código pode ser estendido ainda mais com o comparador de eventos esc keyup adicional. mas isso deve fazer tudo.

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

Felicidades.

Tarandeep Singh
fonte

1

com base no loop de eventos de js, o clickbotão on clear acionará o searchevento na entrada ; portanto, o código abaixo funcionará conforme o esperado:

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

O código acima, evento onclick , registrou um this._cleared = falseloop de eventos, mas o evento sempre será executado após o onsearchevento, para que você possa verificar de forma estável o this._clearedstatus para determinar se o usuário acabou de clicar no Xbotão e, em seguida, acionou um onsearchevento.

Isso pode funcionar em quase todas as condições , texto colado , tem atributo incremental , pressionar a tecla ENTER / ESC etc.

James Yang
fonte

1

Aqui está uma maneira de conseguir isso. Você precisa adicionar um atributo incremental ao seu html ou ele não funcionará.

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>

Expandir snippet

Revanth
fonte

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
fonte

0

A pesquisa ou o onclick funcionam ... mas o problema encontrado foi nos navegadores mais antigos - a pesquisa falha. Muitos plug-ins (preenchimento automático da interface do usuário jquery ou filtro de fantasia) têm manipuladores de desfoque e foco. Adicionar isso a uma caixa de entrada de preenchimento automático funcionou para mim (usei this.value == "" porque era mais rápido para avaliar). O desfoque então o foco manteve o cursor na caixa quando você pressiona o pequeno 'x'.

O PropertyChange e a entrada funcionaram para o IE 10 e IE 8, bem como para outros navegadores:

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

Para a extensão do filtro FancyTree, você pode usar um botão de redefinição e forçar o evento de clique da seguinte maneira:

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

Deve ser capaz de adaptar isso para a maioria dos usos.

Richard Dufour
fonte

-2

Ao clicar no botão cruzado TextField (X) onmousemove () é acionado, podemos usar esse evento para chamar qualquer função.

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

priyaranjan sahoo
fonte

Como você detecta a limpeza de uma entrada HTML5 de "pesquisa"?

Respostas:

Acredito que esta é a única resposta que é acionada APENAS quando o x é clicado.