2012-05-07 3 views
2

Comment (en utilisant javascript ou jQuery) puis-je détecter quand une valeur a été sélectionnée dans une zone de sélection, même si c'est la même option que précédemment (c.-à-d. Principalement, j'ai besoin de cela pour l'interaction avec la souris, mais une solution qui fonctionne pour le clavier serait également utile.Détection de l'interaction avec la zone de sélection

+0

Il y a des chances que vous essayez d'aller sur quoi que ce soit dans le mauvais sens . Puis-je vous demander pourquoi vous voulez ce comportement? Personnellement, je m'oppose au changement de comportement du navigateur. –

+1

@Tyler Crompton J'ai quelques lignes dans un tableau peuplé par Backbone et certaines des colonnes contiennent une boîte de sélection pour afficher et permettre la modification de la valeur. Je veux enregistrer un horodatage pour la dernière fois que l'utilisateur a interagi avec un enregistrement et il est important d'enregistrer même les interactions qui n'entraînent aucun changement. Fondamentalement, pour mes fins, un utilisateur qui évalue et envisage de changer la valeur est aussi important que de le changer. – wheresrhys

Répondre

0

La seule solution que je trouve réalisable est de provoquer change événement en définissant la valeur de select à un autre sur mousedown. Dans le balisage, j'ai créé une option supplémentaire (c'est-à-dire le premier enfant) et l'ai cachée (se cache parfaitement dans Chrome/FF/Safari, IE comme d'habitude). Donc ça a l'air bien.

<select> 
    <option style="display: none"></option> 
    <option>First</option> 
    <option>Second</option> 
    <option>Third</option> 
</select>​ 

Ensuite, en utilisant jQuery nous relions change et mousedown événements d'une manière que lorsque mousedown déclencheurs, select remet à zéro sa valeur à la valeur de l'option cachée.

$("select").on({ 
    change: function() { 
     console.log($(this).val()); 
    }, 
    mousedown: function() { 
     $(this).val($(":first", this).val()); 
    } 
});​ 

DEMO:http://jsfiddle.net/LzNrS/

MISE À JOUR: Afin de préserver la valeur sélectionnée lorsque l'utilisateur a cliqué sur select mais décidé de ne pas quoi que ce soit choisir, nous pouvons modifier le code un peu en ajoutant blur événement et mettre à jour mousedown.

var special = ""; // special hidden option value 
var value = ""; // temporary variable 

$("select").on({ 
    change: function() { 
     console.log($(this).val()); 
    }, 
    mousedown: function() { 
     if (this.value == special) { 
      $(this).val(value); 
      return; 
     } 
     value = this.value; 
     $(this).val(special); 
    }, 
    blur: function() { 
     if (this.value == special) 
      $(this).val(value); 
    } 
});​ 

DEMO:http://jsfiddle.net/LzNrS/1/

+0

Envisager également la navigation du clavier que l'OP mentionné. Bon travail. –

+0

Belle solution. Finalement, comme il ne semble pas y avoir une solution totalement simple, j'ai décidé de contourner le problème en affichant la valeur actuelle dans une étiquette adjacente et en la mettant à jour, puis de la réinitialiser à l'option par défaut un événement. – wheresrhys

+0

@wheresrhys Cela devrait fonctionner par tous les moyens :) – VisioN

0

Je ne sais pas si cela fonctionnerait seulement du haut de ma tête si vous pouviez attacher un gestionnaire d'événement à l'élément d'option de boîte de sélection et sur le clic stocker sa valeur.

travaille avec la souris, ne fonctionne pas avec le clavier http://jsfiddle.net/w4DEJ/4/

+0

quel navigateur utilisez-vous? ne fonctionne pas de mon côté .. im en utilisant chrome .. –

+0

fonctionne dans firefox 12 – slash197

+0

Je peux confirmer qu'il ne fonctionne pas en chrome, mais dans IE – slash197

Questions connexes