jQuery détecter cliquez sur désactivé bouton soumettre
Violon: http://jsfiddle.net/ugzux/
Comme vous pouvez le voir, j'ai un formulaire avec une désactivé (via javascript) bouton soumettre.
Je veux être en mesure de lier un événement click de toute façon, donc je peux faire quelques jazzy indication de ce qui doit être fixé sur l'entrée avant, je vais permettre le formulaire pour être soumis (j'.e activer à nouveau le bouton).
Cependant, la désactivation du bouton soumettre aussi apparemment désactive tout sur les événements liés à ce bouton, même si elles sont liées, après le désactiver - une idée de comment contourner ce problème?
Pratiquement, la seule solution est d'arrêter la désactivation de la touche et au lieu d'avoir un événement qui ne
$('form').submit(function(event){
event.preventDefault();
});
Cependant je veux savoir les tenants et les aboutissants de désactivé les entrées et les événements javascript, et si il y a des solutions de contournement que je n'ai jamais rencontré ce comportement avant.
- C'est par la conception. La plupart des cadres de l'INTERFACE utilisateur ignorer les contrôles désactivés lors de l'envoi de la souris cliquez sur les événements, et celui utilisé par votre navigateur n'est pas une exception.
- FF6 sur mac) merci pour la clarification - savez-vous où je peux trouver un spec détaillant ce comportement - je.e est-il dans l'ECMA spec?
- Eh bien, HTML5 ne dis
A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element
, donc je pense que ça peut être considéré comme documenté (et les navigateurs à l'aide d'une trousse d'outils qui ne relais événements click pour handicapés contrôles devraient sans doute ignorer pour être compatible). - cela a un sens, merci pour vos commentaires réfléchis. Pour quiconque s'intéresse à la résolution du problème mentionné dans ma question, j'ai juste donné le bouton désactivé classe plutôt que d'une désactivé attribut, et testé contre que lorsque l'utilisateur clique dessus, la prévention de la soumission d'un formulaire si le bouton a les handicapés de la classe.
Vous devez vous connecter pour publier un commentaire.
Trouvé dans cette question -
J'avais pensé que vous pourriez être en mesure de 'faux' un clic en les enveloppant le bouton dans un div et la cuisson de la logique sur la div cliquez sur l'événement. Mais, comme indiqué ci-dessus, les événements sur désactivé éléments ne semblent pas être bouillonnait l'arborescence DOM.
input[disabled] {pointer-events:none}
à votre CSS. Ensuite, lorsque l'entrée est désactivée, son élément parent va attraper le clic, et vous peut capture qui.pointer-events:none
: caniuse.com/#search=pointer-eventsLe meilleur moyen que j'ai trouvé pour ce faire est d'utiliser un "handicapé" de la classe pour désactiver le bouton. Vous pouvez ensuite attraper cliquez sur événements normalement en jquery. Si
$(this).hasClass('disabled')
, vous faites votre "jazzy indication des trucs, avecevent.preventDefault();
une Fois que l'utilisateur a fait leur chose, vous pouvezremoveClass('disabled')
de lainput[type="submit"]
"bouton". Facile!Vous pouvez mettre un div autour du bouton de soumission et de joindre une fonction de clic pour que lorsque le bouton "soumettre" est désactivé:
C'est juste le code à partir du haut de ma tête, il pourrait ne pas être tout à fait exact. Mais vous obtenez le point.
Ici, vous allez 😉
Une autre solution de contournement avec la combinaison d'une case à cocher peut être:
CSS-Magie
JQuery-Trucs
Peut-être pas l'état de l'art, mais ça fonctionne assez bien!
Faisant le bouton
readonly
peut aider, parce que l'événement de clic sera tiré. Bien être conscient de la les différences dans le comportement.Que vous devez utiliser .désactivé classe à l'élément de style à l'oeil handicapé, puis de le gérer comme vous le souhaitez à l'aide .hasClass('.disabled') dans votre code JS.
Il faut travailler aussi longtemps que vous n'avez pas mis le "pointer-events: none;" déclaration dans le code css pour .désactivé classe
Je suis un peu plus compliquer, mais des cas d'utilisation pour vous:
À l'aide de jQuery, je l'ai fait avec qui se Chevauchent sur le bouton avec un div, et envelopper la div à la place d'un autre div
Voir ci-dessous la démo
JS:
HTML:
De bonnes choses au sujet de cette approche:
css
html
Vous pouvez essayer ce pour cliquez sur le bouton
Il suffit de ne pas désactiver le bouton, mais éviter de soumettre le formulaire. On dirait que vous essayez de valider le formulaire, lorsque vous laissez-JS prendre plus de les soumettre l'action, et renvoie la valeur false, le formulaire ne sera pas soumettre