Détectez si un élément est visible (sans utiliser jquery)

J'essaie de détecter si un élément html que j'ai donné un identifiant est visible ou non sans utiliser jquery.

Le contexte:

Dans la page de mot de passe de l'utilisateur oublié, j'ai un formulaire dans lequel l'utilisateur saisit son nom de connexion et clique sur Submit. Après cela, s'il a posé une question de renversement, il sera montré et il pourra répondre à cette question et se soumettre à nouveau. (Même bouton avant).

Mon problème:

Lorsque l'utilisateur clique sur soumettre, dans IE, s'il clique dessus plusieurs fois, il obtiendra un e-mail pour chaque fois qu'il clique dessus.

Ce que je pense:

Je souhaite désactiver le bouton après avoir cliqué sur ce bouton de soumission, mais je ne peux le désactiver que si deux conditions sont correctes:

Si l'utilisateur a déjà envoyé son identifiant (sans erreur).
L'utilisateur a une question de chaland enregistrée et il l'a répondu correctement.

Je ne peux pas modifier le processus, cela a été fait, alors j'ai pensé à ajouter un identifiant dans le champ de la réponse et vérifie s'il est visible. Si c'est le cas et que l'utilisateur clique sur le bouton de soumission, je souhaite appliquer le bouton de désactivation de l'attribut sur l'étiquette. Ce que je ne sais pas, c'est comment faire ceci sans utiliser jquery.

Avec jQuery, je pourrais faire quelque chose comme ça:

if($('#secretAns').is(':visible')) { //i think it could be the solution $('#general_Submit.Label').attr( disabled, disabled ); }

Pour postuler à:

 <div id="secretAns" class="loginTxtFieldWrapper"> <font color='red'>*</font><input type="text" name="secretAns" /> <input type="hidden" name="isAnswerPage" value="1"/> </div> <p id="loginSubmitLink"> <input id="general_Submit.Label" type="submit" value="general_Submit.Label" />" /> </p>

Je trouve difficile de rechercher des solutions javascript pur, car tout le monde a tendance à utiliser jquery, et je ne peux pas l'utiliser dans mon application, alors si quelqu'un peut m'aider à le faire avec javascript pur, j'apprécierai.

Google m'a aidé à découvrir comment jQuery le fait, vous pouvez faire de même:

Dans jQuery 1.3.2, un élément est visible si son offsetWidth ou offsetHeight reporté par le navigateur est supérieur à 0.

Notes de version

La recherche du code source m'a donné ceci:

 // The way jQuery detect hidden elements, and the isVisible just adds "!". elem.offsetWidth === 0 && elem.offsetHeight === 0

S'il vous plaît voir cela, il est habituel que le code pourrait être utile

 <!DOCTYPE html> <html> <body> <div id="one" style="visibility: hidden;">The content of the body element is displayed in your browser. </div> <div id="two" style="visibility: visible;"> I'm Cool </div> <div onclick="push();"> Click me </div> <script> function push() { a = document.getElementById("one").style.visibility; alert("one "+a); b = document.getElementById("two").style.visibility; alert("one "+b); } </script> </body> </html>

Le code ci-dessus donne l'état de visibilité du div en utilisant son identifiant tel que U requis.

Comme je pensais à la désactivation du bouton, je suis là pour écrire que j'avais tort sur mon idée de solution pour ce problème, car il serait vraiment coûteux de le faire fonctionner. De cette façon, après avoir étudié, testé quelques idées et lisant les idées @gdoron et @AmeyaRote apportées, j'ai compris qu'une solution simple était de cacher le bouton 'submit' après avoir cliqué dessus (la page est actualisée, la validation est cochée et Le bouton est à nouveau disponible après ce processus). Donc, voici la solution pour résoudre le problème pour éviter que l'utilisateur ne clique sur plus d'une fois sur le bouton de soumission, pour ce cas particulier où je ne peux pas le désactiver (si je désactive après avoir cliqué, le formulaire n'a pas été envoyé):

Le HTML

Je viens d'ajouter l'attribut onclick appelant une fonction javascript créée pour cacher le bouton:

 <p id="loginSubmitLink"> <input id="general_Submit.Label" type="submit" onclick ="avoidDoubleSubmit();" value="general_Submit.Label" />" /> </p>

Le Javascript

 function avoidDoubleSubmit() { <c:if test="${not empty secretQues}"> event_addEvent(window,'load',function(){document.ResetPasswordForm.secretAns.focus();}); document.getElementById('general_Submit.Label').style.display ='none'; </c:if> }

Sur le bouton general_Submit.Label, cliquez sur appeler une fonction Callfun () et puis le bouton désactivé

 <input id="general_Submit.Label" onclick="Callfun()" type="submit" value="<ezmi18n:message key="general_Submit.Label" />" /> function Callfun() { document.getElementById("general_Submit.Label").disabled = true; }

Je l'ai écrit quelque temps. Cela gère beaucoup de cas à ma connaissance. Cela vérifie effectivement si l'élément est vu par l'utilisateur dans son état actuel.

Vérification de l'affichage, de la visibilité, de l'opacité, du dépassement et de la récurrence jusqu'à ce que nous allions jusqu'au nœud du document.

 function isVisible(el) { while (el) { if (el === document) { return true; } var $style = window.getComputedStyle(el, null); if (!el) { return false; } else if (!$style) { return false; } else if ($style.display === 'none') { return false; } else if ($style.visibility === 'hidden') { return false; } else if (+$style.opacity === 0) { return false; } else if (($style.display === 'block' || $style.display === 'inline-block') && $style.height === '0px' && $style.overflow === 'hidden') { return false; } else { return $style.position === 'fixed' || isVisible(el.parentNode); } } }