检测元素是否可见(不使用jquery)

时间:2013-01-02 12:26:18

标签: html javascript-events cross-browser javascript

我试图在没有使用jquery的情况下检测我提供id的html元素是否可见。

上下文:

在忘记的用户密码页面中,我有一个表单,用户输入他的登录名并点击提交。在那之后,如果他设置了一个挑战问题,它将被显示,他将能够回答这个问题并再次提交。 (之前的相同按钮)。

我的问题:

当用户点击提交时,在IE中,如果他多次点击提交,他每次点击都会收到一封电子邮件。

我的想法:

我想在点击此提交按钮后禁用该按钮,但我只能在两个条件正确的情况下禁用它:

  1. 如果用户已经提交了他的登录名(没有错误)。
  2. 用户注册了chalenge问题,并且他正确回答了问题。
  3. 我不能改变这个过程,所以我想在答案的字段中添加一个id并检查它是否可见。如果是,并且用户点击了提交按钮,我想在标签上应用属性禁用按钮。我不知道如何在不使用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来做到这一点,我会&#39;我会很感激。

5 个答案:

答案 0 :(得分:23)

Google帮助我了解了jQuery是如何做到的,你也可以这样做:

  

在jQuery 1.3.2中,如果浏览器报告的 offsetWidth offsetHeight 大于0,则可以看到该元素。

Release notes

搜索源代码给了我这个:

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

答案 1 :(得分:1)

请注意这是习惯性的,很少有代码可能有用

<!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的可见性状态,使用它的ID作为U需要。

答案 2 :(得分:1)

当我考虑禁用按钮时,我在这里写道,我对这个问题的解决方案的想法是错误的,因为要使它工作起来真的很昂贵。 这样,经过研究,测试了一些想法并阅读了@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>
}

答案 3 :(得分:1)

我写了一段时间回来。据我所知,这处理了很多案例。这实际上会检查用户是否在当前状态下看到该元素。

检查显示,可见性,不透明度,溢出怪癖,并以递归方式执行,直到文档节点为止。

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

答案 4 :(得分:0)

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