Ash*_*ley 4 javascript forms scroll
一旦用户滚动到表单的条款和条件部分的底部,我需要激活一个复选框。这将是电子商务网站结帐页面一部分的一部分。
我在这里已经看到了有关此问题的争论,但是由于我们的律师,出于责任原因,在我们的网站上必须采用这种方式。滚动框末尾的接受按钮将是最后的选择,因为这似乎使我们一些认为根本不存在的用户感到困惑,无论我们向他们提供多少有关按钮位置的信息。
我获取了此代码并对其进行了操纵,以使其尝试执行我想要的操作。我的代码在下面列出。没用 我已经成功禁用了该按钮,但是似乎无法重新激活它。
我对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>
Run Code Online (Sandbox Code Playgroud)
使用普通的JS,它增加了一些我们需要检查的内容。考虑以下:
获取LicenseAgreementElement:
var textElement = document.getElementsByName("licenseAgreement")[0]
现在我们有了元素,
获取licenseAgreement文本区域滚动到多少。
textElement.scrollHeight
我们需要检查用户是否滚动了整个AgreementElement。在
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;
}
}
Run Code Online (Sandbox Code Playgroud)
满足条件时启用复选框。
最后是一个小例子:JSFiddle