4.10 阅读完协议才可以单击的注册按钮

前面介绍了具有倒计时效果的注册按钮，说实话笔者对这个功能不是太“感冒”，因为强迫读者等待倒计时也是很让人无语的。那么有没有改进版的方案呢？答案是肯定的，还有一种是“阅读完用户协议后注册按钮才被激活可以单击”的功能按钮。

一般注册页面的用户协议是放在一个文本域<textarea>控件内的，我们可以监听文本域的onscroll滚动事件，并借助滚动高度属性（scrollHeight）来判断用户是否阅读完文本域中用户协议，然后来激活启动用户注册按钮。

下面就具体介绍一个在阅读完用户注册协议后用户才可以单击注册按钮的JavaScript代码实例。

关于【代码4-9】的说明：

● 第14～16行代码通过<textarea>标签定义了一个文本域，同时定义了onscroll滚动事件方法（on_scroll_reg(this.id)）。

● 第17行代码通过<button id="id-btn-reg">标签定义了一个注册按钮，初始状态是被禁用的。

● 第21～26行行代码是on_scroll_reg()事件方法的实现，通过判断文本域的scrollTop属性和clientHeight属性之和是否大于scrollHeight属性得出用户是否阅读完注册协议，同时是否执行启用激活注册按钮的操作。

下面使用Firefox浏览器运行测试该HTML网页，具体效果如图4.9所示。

图4.9 JavaScript注册按钮倒计时效果

注意滚动条的初始位置以及拖动到底后注册按钮的状态（“用户注册”按钮被成功启用激活）。