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

Question

我有一个包含只读textarea的注册表单。我想要求任何访问者滚动到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

使用类似这样的文字区域内：

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

但如果JS被禁用？

我宁愿在底部提交按钮滚动div。无论JS打开还是关闭，用户都无法在最后滚动时不点击该按钮。

Answer 3

其他答案完美，但我一直在使用一个稍微不同的方法，一个不配合提交按钮被禁用的能力，把一个sample ，以便它可以与其他验证器等混合使用。

$(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 4

Christian Varga's solution是完全正确的，也可以适用于股利。但是，如果您使用的是div而不是textarea，则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 5

我推荐这个，它更好地处理缩放。

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

+2处理少数比例的场景时scrollTop的+ innerheight稍低于scrollHeight属性（出于某种原因，我懒得锻炼）。