Wykryj, czy element jest widoczny (bez użycia jquery)

Próbuję wykryć, czy element html, któremu dałem identyfikator, jest widoczny, czy nie, bez użycia jquery.Wykryj, czy element jest widoczny (bez użycia jquery)

Kontekst:

W zapomnianej stronie hasło użytkownika, Mam formularz, w którym użytkownik wpisać swój login i kliknięcia na przedstawienia. Po tym, jeśli zadał pytanie o chalenge, zostanie pokazane, a on będzie w stanie odpowiedzieć na to pytanie i ponownie. (ten sam przycisk przed).

Mój problem:

gdy użytkownik kliknie na przedstawienia, w IE, jeśli kliknie go kilka razy, dostanie jedną wiadomość e-mail za każdym razem on kliknie na nim.

Co myślę:

Chcę wyłączyć przycisk po kliknięciu tego przycisku Prześlij, ale mogę tylko wyłączyć go, jeśli dwa warunki są poprawne:

Jeśli użytkownik ma już podał swoją nazwę użytkownika (bez błędów).
użytkownik ma zarejestrowane pytanie o chalenge i odpowiedział poprawnie.

Nie mogę zmienić tego procesu, więc pomyślałem o dodaniu identyfikatora w polu odpowiedzi i sprawdzeniu, czy jest widoczny. jeśli tak, a użytkownik kliknie przycisk przesyłania, chcę zastosować przycisk wyłączania atrybutu na etykiecie. Nie wiem, jak to zrobić bez użycia jquery.

z jQuery mógłby zrobić coś takiego:

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

}

zastosować na:

<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>

znajdę trudno szukać czystych rozwiązań JavaScript, ponieważ każdy ma tendencję do korzystania z jQuery, a ja nie mogę go użyć w mojej aplikacji, więc jeśli ktoś może mi pomóc to zrobić z czystym javascriptem, doceniam to.

Źródło

2013-01-02 periback2

Sprawdź kod źródłowy jQuery i zobacz, co robią z selektorem ': visible'. – gdoron

możliwy duplikat [JavaScript: Jak sprawdzić, czy element jest widoczny?] (Http://stackoverflow.com/questions/11391452/javascript-how-to-check-if-element-is-visible) – xyz

@Ajinkya, ty zauważyłem, że "duplikat" jest pytaniem jQuery, prawda? – gdoron

Google pomógł mi dowiedzieć się, jak to robi jQuery, można zrobić to samo:

w jQuery 1.3.2 element jest widoczny, jeśli jego przeglądarka zgłaszane offsetWidth lub offsetHeight jest większa niż 0.

Release notes

wyszukiwania kodu źródłowego dał mi ten:

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

Źródło

2013-01-02 12:37:15 gdoron

Po prostu FYI: wznowiłem :) – xyz

@gdoron, ładny strzał! to jest naprawdę droga ... Wymyślę rozwiązanie i opublikuję tutaj, kiedy znajdę. Dzięki. +1 – periback2

Dodałem moją odpowiedź, aby pokazać rozwiązanie mojego problemu, ale odpowiedź na tytuł mojego pytania może być twoją odpowiedzią. Po prostu nie rozumiem, jak działa przesunięcie lub wysokość odsunięcia. Rozumiałem, jak sprawdzać widoczność, ale wciąż będę więcej o niej szukać. wielkie dzięki – periback2

Wniesienie ogólne.Przycisk etykieta kliknij wezwać Callfun function(), a następnie przycisk wyłączoną

<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; 
    }

Źródło

2013-01-02 12:44:47

Proszę zobaczyć to zwyczajowe rzadko kod może być przydatna

<!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>

Powyższy kod daje status widoczności div używając jego tożsamości jako U wymagane.

Źródło

2013-01-02 12:45:51

Jest coś więcej niż tylko "style.visibilty". – gdoron

możesz ustawić widoczną zmienną licznika i używać jej tak, jak gdyby (visum_counter) i śledzić resztę kodu. –

w rzeczywistości style.visibility zwraca null, jeśli atrybut nie jest ustawiony (myślę, że to jest powód), podczas gdy .offsetWidth zwraca null, jeśli nie jest widoczny, a jeśli jest widoczny, zwraca wartość dodatnią. Więc wierzę, że @gdoron jest na najlepszej drodze. – periback2

Kiedy myślałem o wyłączeniu przycisku, jestem tutaj, aby napisać, że myliłem się co do mojego pomysłu na rozwiązanie tego problemu, ponieważ byłoby naprawdę kosztowne, aby to działało. W ten sposób, po przestudiowaniu, przetestowaniu kilku pomysłów i przeczytaniu pomysłów @gdoron i @AmeyaRote, odkryłem, że prostym rozwiązaniem było ukrycie przycisku "wyślij" po kliknięciu (strona jest odświeżana, sprawdzanie poprawności jest sprawdzane a przycisk jest ponownie dostępny po tym procesie). Oto rozwiązanie tego problemu, aby uniknąć kliknięcia przycisku więcej niż jeden raz w tym konkretnym przypadku, w którym nie mogę go wyłączyć (jeśli wyłączę go po kliknięciu, formularz nie został przesłany):

HTML

właśnie dodany atrybut onclick Wywołanie funkcji javascript stworzyłem aby ukryć przycisk:

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

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> 
}

Źródło

2013-01-03 10:58:27 periback2

Napisałem to jakiś czas temu. Zajmuje mi to wiele przypadków. To faktycznie sprawdza, czy element jest widziany przez użytkownika w jego bieżącym stanie.

Sprawdza wyświetlanie, widoczność, krycie, przepełnienie i robi to rekurencyjnie, dopóki nie przejdziemy do węzła dokumentu.

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); 
      } 
     } 
    }

Źródło

2017-06-18 06:48:18 gauravmuk

Wykryj, czy element jest widoczny (bez użycia jquery)

Odpowiedz

Powiązane problemy