16

我正在尝试在不使用 jquery 的情况下检测我提供 id 的 html 元素是否可见。

上下文：

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

我的问题：

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

我的想法：

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

  1. 如果用户已经提交了他的登录名（没有错误）。
  2. 用户注册了一个挑战问题并且他回答正确。

我无法更改已完成的过程，因此我考虑在答案字段中添加一个 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 来做到这一点，我将不胜感激。

4

5 回答 5

27

谷歌帮助我了解了 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
于 2013-01-02T12:37:15.603 回答
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>

上面的代码使用 U 所需的 ID 给出了 div 的可见性状态。

于 2013-01-02T12:45:51.883 回答
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>
}
于 2013-01-03T10:58:27.910 回答
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);
            }
        }
    }
于 2017-06-18T06:48:18.193 回答
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;
    }
于 2013-01-02T12:44:47.983 回答