Question

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

上下文：

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

我的问题：

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

我的想法：

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

如果用户已经提交了他的登录名（没有错误）。
用户注册了chalenge问题，并且他正确回答了问题。

我不能改变这个过程，所以我想在答案的字段中添加一个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;我会很感激。

Answer 1

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

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

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

Answer 4

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

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

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

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

检测元素是否可见（不使用jquery）

5 个答案: