使用 jQuery，如何强制访问者滚动到文本区域的底部以启用提交按钮？

Question

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

这是示例 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可以处理一些缩放场景（出于某种原因，我懒得解决）。

Answer 3

Christian Varga 的解决方案 绝对正确，也可以应用于 div。但是，如果您使用 div 而不是文本区域，则 div 上不得有任何填充，否则会损坏。

我的解决方法是在我的样式 div 中放置一个 div（带有填充、圆角和边框）来检测滚动。因此：

<div class="styled-div">
     <div id="terms">
          Lorem ipsum...terms text...
     </div>
</div>
<input type="submit" id="register" value="Register"/>

这种方法唯一可能的缺点是，如果您向包含的 div 添加填充，滚动条会出现在内部 div 上，这对某些用户来说可能看起来不太好。

Answer 4

其他答案完美地工作，但我使用稍微不同的方法整理了一个示例，该方法不不要将提交功能与禁用的按钮联系起来，以便它可以与其他验证器等混合。

$(function(){

    var terms_were_scrolled = false;

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

    $('#terms_agreed').click(function( event ){
        if( !terms_were_scrolled ){
            alert('you must read all the way to the bottom before agreeing');  
            event.preventDefault();               
        }            
    });

});​

HTML：

<form action="#">
  <textarea id="terms" cols="100" rows="10">
      Lorem Ipsum ....
  </textarea>
  <br />
  <input type="checkbox" id="terms_agreed"/> I agree
  <br />
  <input type="submit">
</form>​

Answer 5

在文本区域中使用类似这样的内容：

onscroll="if(this.scrollTop+this.offsetHeight>=this.scrollHeight){/*enable the button*/}" 

但是如果 JS 被禁用怎么办？

我更喜欢底部有提交按钮的可滚动 div。无论 JS 开启还是关闭，用户都无法在最后不滚动的情况下点击按钮。