根据滚动位置有条件地禁用/启用按钮

发布于 12-08 13:23 字数 1714 浏览 1 评论 0原文

一旦用户滚动到表单的条款和条件部分的底部,我需要激活一个复选框。这将是电子商务网站结账页面的一部分。

我在这里看到过有关此问题的争论,但根据我们的律师的说法,出于责任原因,我们的网站上必须采用这种方式。滚动框末尾的“接受”按钮将是最后的手段,因为它似乎会让我们的一些用户感到困惑,他们认为无论我们向他们提供多少有关按钮位置的信息,它根本不存在。

我获取了代码并对其进行操作以尝试让它执行以下操作我想要。我的代码如下所示。这不起作用。我已成功禁用该按钮,但似乎无法重新激活它。

我对 javascript 很陌生,任何帮助将不胜感激。

   <head>
    <title>Scroll Test</title>
    <script language="JavaScript">
    </script>
</head>

<body>

<form name="form22" action="javascript: alert('Form submitted!');" onSubmit="return formValidation(this);">

    <p>
    License Agreement:<br />
    <textarea name="licenseAgreement" rows="10" cols="45">This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

</textarea>
    </p>

    <p>
    <input name="button" type="checkbox" value="Submit" disabled> I agree
    </p>

</form>

</body>
</html>

I need to activate a checkbox once a user has scrolled to the bottom of a terms and conditions section of a form. The will be a section in part of a checkout page for ecommerce site.

I have seen arguments on here about this, but per our lawyers, it has to be this way on our site for liability reasons. An accept button at the end of the scroll box would be the last resort, as it seems to confuse some of our users who think it is not there at all no matter how much info we give them about where the button is.

I sourced this code and manipulated it to try and get it to do what I wanted. My code is listed below. It doesn't work. I have successfully disabled the button, however I cannot seem to reactivate it.

I am pretty new to javascript and any help would be greatly appreciated.

   <head>
    <title>Scroll Test</title>
    <script language="JavaScript">
    </script>
</head>

<body>

<form name="form22" action="javascript: alert('Form submitted!');" onSubmit="return formValidation(this);">

    <p>
    License Agreement:<br />
    <textarea name="licenseAgreement" rows="10" cols="45">This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

    This is my long, long license agreement where you agree to all of my demands.

</textarea>
    </p>

    <p>
    <input name="button" type="checkbox" value="Submit" disabled> I agree
    </p>

</form>

</body>
</html>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

淡水深流2024-12-15 13:23:21

使用普通的 JS 它会添加一些我们需要检查的东西。考虑以下几点:

获取 LicenseAgreementElement:

var textElement = document.getElementsByName("licenseAgreement")[0]

现在我们有了该元素,

获取许可证协议文本区域滚动的距离。

textElement.scrollHeight

我们需要检查用户是否滚动了
整个协议元素,即。实际元素的 scrollTop + height

textElement.scrollTop + textElement.offsetHeight >= textElement.scrollHeight

在开始时附加事件侦听器为我们提供了以下功能:

document.getElementsByName("licenseAgreement")[0].addEventListener("scroll", checkScrollHeight, false);

function checkScrollHeight(){
    var textElement = document.getElementsByName("licenseAgreement")[0] 
    if ((textElement.scrollTop + textElement.offsetHeight) >= textElement.scrollHeight){
        document.getElementsByName("button")[0].disabled = false;
    }
}

满足条件时启用复选框。

最后一个小例子: JSFiddle

Using normal JS it adds a few things we need to check. Consider the following:

Get the LicenseAgreementElement:

var textElement = document.getElementsByName("licenseAgreement")[0]

Now that we have the element,

Get how much the licenseAgreement textarea scrolls to.

textElement.scrollHeight

We need to check if the user has scrolled the
entire AgreementElement ie. The scrollTop + height of the actual element.

textElement.scrollTop + textElement.offsetHeight >= textElement.scrollHeight

Attaching and event listener at the start provides us with the following:

document.getElementsByName("licenseAgreement")[0].addEventListener("scroll", checkScrollHeight, false);

function checkScrollHeight(){
    var textElement = document.getElementsByName("licenseAgreement")[0] 
    if ((textElement.scrollTop + textElement.offsetHeight) >= textElement.scrollHeight){
        document.getElementsByName("button")[0].disabled = false;
    }
}

Enabling the checkbox when the condition is met.

Finally a small time example : JSFiddle

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文