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?
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);
});
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.
Utilisez input
à la place. Cela fonctionne avec le même comportement sous tous les navigateurs.
$(some-input).on("input", function() {
// update panel
});
Pourquoi pas
$("input").bind('input propertychange', function() {
if (this.value == ""){
$input.trigger("cleared");
}
});
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é!
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
});
}
});
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; }
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);
});
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: