web-dev-qa-db-fra.com

Evénement déclenché lors de l'effacement du texte saisi sur IE10 avec une icône en clair

Sur Chrome, l'événement "search" est déclenché sur les entrées de recherche lorsque l'utilisateur clique sur le bouton d'effacement.

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

enter image description here

javascripteventsinternet-explorer-10html-input
76
ghusse

La seule solution que j'ai finalement trouvée:

// 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);
});
66
ghusse

L'événement oninput est déclenché avec this.value défini sur une chaîne vide. Cela a résolu le problème pour moi, car je veux exécuter la même action, qu’ils effacent le champ de recherche avec le X ou en utilisant un espacement arrière. Cela fonctionne dans IE 10 uniquement.

40
Lucent

Utilisez input à la place. Cela fonctionne avec le même comportement sous tous les navigateurs.

$(some-input).on("input", function() { 
    // update panel
});
26
Jeffry Ureña Miranda

Pourquoi pas

$("input").bind('input propertychange', function() {
    if (this.value == ""){
      $input.trigger("cleared");
    }
});
10
Ertug

Je me rends compte que cette question a reçu une réponse, mais la réponse acceptée ne fonctionne pas dans notre situation. IE10 n'a pas reconnu/déclenché l'instruction $input.trigger("cleared");.

Notre solution finale a remplacé cette déclaration par un événement keydown sur la touche Entrée (code 13). Pour la postérité, voici 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);
});

De plus, nous voulions appliquer cette liaison uniquement aux entrées "recherche", et non à toutes les entrées de la page. Naturellement, IE a rendu cela aussi difficile ... bien que nous ayons codé <input type="search"...>, IE les a rendus sous la forme type="text". C'est pourquoi le sélecteur jQuery fait référence au type="text".

À votre santé!

8
OrangeWombat

Nous pouvons simplement écouter l'événement input. S'il vous plaît voir la référence pour plus de détails. Voici comment j'ai corrigé un problème de bouton clair dans Sencha ExtJS sur IE:

Ext.define('Override.Ext.form.field.ComboBox', {
    override: 'Ext.form.field.ComboBox',

    onRender: function () {
        this.callParent();

        var me = this;
        this.inputEl.dom.addEventListener('input', function () {
            // do things here
        });
    }
});
6
jaselg

pour mon contrôle de serveur asp.net 

<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 

Evénement MSDN onchange - testé dans IE10.

... ou se cacher avec CSS:

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

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

// There are 2 events fired on input element when clicking on the clear button:// mousedown and mouseup.
$("input").on('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 === ''){
            $input.typeahead('val', '');
            e.preventDefault();
        }
    }, 1);
});
0
Maneesh Thareja

Une solution prête à l'emploi consiste simplement à supprimer complètement le X avec CSS:

::-ms-clear { display: none; } /* see https://stackoverflow.com/questions/14007655 */

Cela présente les avantages suivants:

  1. Solution beaucoup plus simple - s'adapte sur une seule ligne
  2. S'applique à toutes les entrées afin que vous n'ayez pas besoin d'un gestionnaire pour chaque entrée
  3. Aucun risque de casser javascript avec un bug en logique (moins de QA nécessaire)
  4. Standardise le comportement de tous les navigateurs - incite IE à se comporter de la même manière que chrome car chrome ne possède pas le X
0
Almenon