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

Posted 2023-05-07

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

【英文标题】：Using jQuery, how do I force a visitor to scroll to the bottom of a textarea to enable the submit button?

【发布时间】：2011-08-24 14:09:52

【问题描述】：

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

这是示例 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 来启用此验证来控制提交问题。感谢您的帮助和建议！

【问题讨论】：

顺便说一句，你为什么要做这样的事情？无论他们是否滚动，就您而言，唯一重要的是他们同意了。

@znek 是的，@Micah 是什么阻止用户只是快速浏览而不阅读它？

@zneak - 这是我雇主的要求。 @Thomas Shields - 我同意你的观点，但如果有诉讼，这是一个法律问题。

【参考方案1】：

这样的事情应该可以工作：

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

只需给条款一个 id，并在 html 中将注册按钮设置为禁用。我还做了一点小技巧来展示它的工作原理：http://jsfiddle.net/ETLZ8/

【讨论】：

我使用了这个解决方案，但遇到了一个问题：如果用户缩放级别不是 100%，那么计算将关闭并且按钮不会激活。在 Ubuntu 和 Windows 上的 Chrome/Firefox 上复制了此错误。

在下面查看我的答案以进行缩放修复

@ssell 您甚至不必缩放。只需设置较短的文本，滚动视图将永远无法滚动，一切都会被搞砸））

【参考方案2】：

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

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

当 scrolltop+innerheight 略低于 scrollHeight 时，+2 处理一些缩放场景（由于某种原因，我懒得解决）。

【讨论】：

优秀的家伙！

【参考方案3】：

Christian Varga's solution 绝对正确，也可以应用于 div。但是，如果您使用的是 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 上，这对某些用户来说可能看起来不太好。

【参考方案4】：

其他答案完美无缺，但我使用稍微不同的方法组合了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>​

【参考方案5】：

在 textarea 中使用类似的东西：

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

但是如果 JS 被禁用了呢？

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

【讨论】：

Molle - 关于 JS 的好点，但绝大多数注册到该站点的用户默认启用 JS。我更喜欢使用外部 JS 而不是内联，这样它就可以在已经缓存的外部文件中。您将提交按钮放在可滚动 div 底部的想法是一个不错的想法，但不实用且不利于用户体验。

我知道这是旧的，但有人赞成我的答案，我得到了一个提醒，然后我看到了这个答案。 Dr.Molle 对 JS 被禁用提出了一个很好的观点。简单的解决方法是使用 javascript 禁用该按钮。这样如果js被禁用，按钮默认不会被禁用。