根据滚动位置有条件地禁用/启用按钮
一旦用户滚动到表单的条款和条件部分的底部,我需要激活一个复选框。这将是电子商务网站结账页面的一部分。
我在这里看到过有关此问题的争论,但根据我们的律师的说法,出于责任原因,我们的网站上必须采用这种方式。滚动框末尾的“接受”按钮将是最后的手段,因为它似乎会让我们的一些用户感到困惑,他们认为无论我们向他们提供多少有关按钮位置的信息,它根本不存在。
我获取了此代码并对其进行操作以尝试让它执行以下操作我想要。我的代码如下所示。这不起作用。我已成功禁用该按钮,但似乎无法重新激活它。
我对 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>
使用普通的 JS 它会添加一些我们需要检查的东西。考虑以下几点:
var textElement = document.getElementsByName("licenseAgreement")[0]
现在我们有了该元素,
textElement.scrollHeight
textElement.scrollTop + textElement.offsetHeight >= textElement.scrollHeight
在开始时附加事件侦听器为我们提供了以下功能:
满足条件时启用复选框。
最后一个小例子: JSFiddle
Using normal JS it adds a few things we need to check. Consider the following:
var textElement = document.getElementsByName("licenseAgreement")[0]
Now that we have the element,
textElement.scrollHeight
textElement.scrollTop + textElement.offsetHeight >= textElement.scrollHeight
Attaching and event listener at the start provides us with the following:
Enabling the checkbox when the condition is met.
Finally a small time example : JSFiddle