Определить, является ли элемент видимым (без использования jQuery)

Я пытаюсь определить, виден ли HTML-элемент, который я дал, без использования jquery.

Контекст:

На странице забытого пароля пользователя у меня есть форма, в которой пользователь вводит свое имя пользователя и нажимает кнопку "Отправить". После этого, если он задал контрольный вопрос, он будет показан, и он сможет ответить на этот вопрос и отправит снова. (та же кнопка, что и раньше).

Моя проблема:

когда пользователь нажимает на кнопку отправить, в IE, если он нажимает на нее несколько раз, он получает одно электронное письмо за каждый клик по нему.

Что я думаю:

Я хочу отключить кнопку после нажатия на эту кнопку отправки, но я могу отключить ее, только если выполнены два условия:

  1. Если пользователь уже отправил свое имя для входа (без ошибок).
  2. у пользователя зарегистрирован вопрос о chalenge, и он ответил на него правильно.

Я не могу изменить процесс, это сделано, поэтому я подумал о добавлении идентификатора в поле ответа и проверяет, если он виден. если это так, и пользователь нажимает кнопку отправки, я хочу применить кнопку отключения атрибута на ярлыке. Чего я не знаю, как это сделать без использования jquery.

с помощью jQuery я мог бы сделать что-то вроде этого:

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

}

подать заявку на:

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

Мне трудно искать чистые решения Javascript, потому что все склонны использовать jQuery, и я не могу использовать его в своем приложении, поэтому, если кто-то может помочь мне сделать это с использованием чистого Javascript, я буду признателен.

Ответы

Ответ 1

Google помог мне узнать, как это делает jQuery, вы можете сделать то же самое:

В jQuery 1.3.2 элемент отображается, если его сообщенный браузером offsetWidth или offsetHeight больше 0.

Примечания к выпуску

Поиск исходного кода дал мне следующее:

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

Ответ 2

Пожалуйста, посмотрите, что это может быть полезным обычным кодом.

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

приведенный выше код дает статус видимости div, используя его идентификатор по мере необходимости U.

Ответ 3

Как я думал об отключении кнопки, я здесь, чтобы написать, что я ошибался в своей идее решения этой проблемы, потому что было бы очень дорого сделать работу. Таким образом, после изучения, тестирования некоторых идей и чтения идей @gdoron и @AmeyaRote, я понял, что простым решением было скрыть кнопку "отправить" после нажатия на нее (страница обновляется, проверка проверяется и после этого процесса снова появляется кнопка). Итак, вот решение для решения проблемы, чтобы пользователь не нажал кнопку "Отправить" несколько раз, для этого конкретного случая, когда я не могу его отключить (если я отключу после нажатия, форма не была отправлена):

HTML

Я просто добавил атрибут onclick, вызывающий функцию javascript, которую я создал, чтобы скрыть кнопку:

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

Ответ 4

Я написал это некоторое время назад. Насколько мне известно, это касается многих случаев. Это фактически проверяет, видит ли элемент пользователь в текущем состоянии.

Проверяет наличие видимости, видимости, непрозрачности, переполнения и рекурсивно, пока мы не перейдем к документу node.

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

Ответ 5

На кнопке general_Submit.Label щелкните вызов функции Callfun(), а затем отключите кнопку

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