使用jQuery,如何强制访问者滚动到textarea的底部以启用提交按钮？

Question

我有一个包含只读文本区域的注册表单.我想要求任何访问者在提交按钮以提交其信息之前滚动到textarea的底部,其中包含条款和条件或许可协议.

这是示例CSS代码:

textarea {      
  width: 240px;
  height: 200px;
  overflow-y: scroll;
}

这是示例HTML代码:

<form action="action.php">
  <label for="email">Email Address</label><input type="text" id="email" />
  <textarea readonly>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
  <input class="submit" type="submit" value="Register your info" id="register"/>
</form>

如果该disabled属性已经被放到提交输入？

我们已经在使用jQuery库,所以我想继续使用jQuery来启用此验证来控制提交问题.感谢您的帮助和建议!

Answer 1

这样的事情应该有效:

$('#terms').scroll(function () {
    if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) {
        $('#register').removeAttr('disabled');
    }
});

只需给术语一个id,并在html中将注册按钮设置为禁用.我也做了一点小提琴来展示它的工作:http://jsfiddle.net/ETLZ8/

Answer 2

我建议这样做,它可以更好地处理缩放.

$('#terms').scroll(function () {
    if ($(this).scrollTop() + $(this).innerHeight() +2 >= $(this)[0].scrollHeight) {
        $('#register').removeAttr('disabled');
    }
});

当scrolltop + innerheight略低于scrollHeight时,+ 2处理一些缩放场景(出于某种原因,我太懒了,不能解决).