Événement déclenché lors de l'effacement de la saisie de texte sur IE10 avec l'icône d'effacement

Question

Sur chrome, la "recherche" de l'événement est déclenché sur la recherche des entrées lorsque l'utilisateur clique sur le bouton effacer.

Est-il un moyen de capturer le même événement en javascript sur Internet Explorer 10?

Answer 1

La seule solution que j'ai finalement trouvé:

// There are 2 events fired on input element when clicking on the clear button:
// mousedown and mouseup.
$("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 == ""){
      // Gotcha
      $input.trigger("cleared");
    }
  }, 1);
});

Answer 2

L' oninput événement se déclenche avec this.value valeur une chaîne vide. Cela a résolu le problème pour moi, puisque je veux exécuter la même action qu'ils effacer le champ de recherche avec le X ou par reculer. Cela fonctionne dans IE 10.

Answer 3

Je me rends compte que cette question a été posée, mais le a accepté de répondre ne fonctionne pas dans notre situation. IE10 ne reconnaissent pas la/le feu de la $input.trigger("cleared"); déclaration.

Notre solution finale remplacé cette déclaration avec un événement keydown sur la touche ENTRÉE (code 13). Pour la postérité, c'est ce qui a fonctionné dans notre cas:

$('input[type="text"]').bind("mouseup", function(event) {
    var $input = $(this);
    var oldValue = $input.val();
    if (oldValue == "") {
        return;
    }
    setTimeout(function() {
        var newValue = $input.val();
        if (newValue == "") {
            var enterEvent = $.Event("keydown");
            enterEvent.which = 13;
            $input.trigger(enterEvent);
        }
    }, 1);
});

En outre, nous avons souhaité appliquer cette liaison uniquement à la "recherche" des entrées, pas tous les commentaires sur la page. Naturellement, c'est à dire, cela est difficile aussi... bien que nous avions codé <input type="search"...>, c'est à dire qui les a rendus comme type="text". C'est pourquoi le sélecteur jQuery références de l' type="text".

Cheers!

Answer 4

pour ma asp.net contrôle de serveur

<asp:TextBox ID="tbSearchName" runat="server" oninput="jsfun_tbSearchName_onchange();"></asp:TextBox>

js

function jsfun_tbSearchName_onchange() {
    if (objTbNameSearch.value.trim() == '')
            objBTSubmitSearch.setAttribute('disabled', true);
        else
            objBTSubmitSearch.removeAttribute('disabled');
        return false;
}

ref

MSDN événement onchange - testé sur IE10.

... ou de cacher avec les CSS :

input[type=text]::-ms-clear { display: none; }

Answer 5

Le code ci-dessus ne fonctionne pas dans mon cas et j'ai changé une ligne et introduit $d'entrée.typeahead('val', "); qui fonctionne dans mon cas..

// Il y a 2 événements déclenchés sur l'élément d'entrée en cliquant sur le bouton effacer:// mousedown et mouseup.
 $("input").sur('mouseup', function(e){
 var $input = $(this),
 oldValue = $input.val();
 si (oldValue === "){
retour;
}
 // Lorsque cet événement est déclenché après avoir cliqué sur le bouton "clear" / / la valeur n'est pas encore effacé. Nous avons à attendre.
setTimeout(function(){
 var newValue = $input.val();
 si (newValue === "){
 $d'entrée.typeahead('val', ");
e.preventDefault();
}
 }, 1);
});