JavaScript implements the protocol example in which the user must check the box

In js, set the user to read a certain agreement before checking the login or registration (disabled usage skills)

Look carefully at the two pictures and you will see that the circled parts are different.

When the scroll wheel is on top, the form below is not selectable

The second sheet at the bottom is optional

insert image description here

The method is to monitor the scroll wheel. When the scroll wheel reaches the bottom, the form becomes selectable.

info.scrollHeight - info.scrollTop == info.clientHeight //Judge whether the scroll bar has reached the bottom

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#info{
				width: 200px;
				height: 500px;
				background-color: #00FFFF;
				overflow:auto;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*
				 *The form item is available when the vertical scroll bar reaches the bottom * onscroll
				 * This event will be triggered when the scroll bar scrolls	
				 * */ 
				 var info = document.getElementById("info");
				 var inputs = document.getElementsByTagName("input");
				 info.onscroll = function(){
					//Check if the scroll bar has scrolled to the bottom if(info.scrollHeight - info.scrollTop == info.clientHeight){
						//Scroll bar to the bottom and form items are available inputs[0].disabled = false;
						inputs[1].disabled = false;
					}
				 }
			}
		</script>
		<title></title>
	</head>
	<body>
		<h1>Welcome new users to register</h1>
		: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
		<input type="checkbox" name="" id="" value="" disabled="disabled"/>I have read the agreement carefully and will abide by it <input type="submit" value="Register" disabled="disabled"/><!-- If you add disabled="disabled" to the form, the form item will become unavailable-->
	</body>
</html>

This method does not apply to Chrome, but other browsers can

This is the end of this article about the example of how to implement a protocol that users must check in javascript. For more relevant content about how to implement a protocol that users must check in javascript, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

JavaScript implements countdown on front-end web page
Detailed explanation of for loop and double for loop in JavaScript
JavaScript to implement image preloading and lazy loading
Five ways to traverse JavaScript arrays
In-depth understanding of javascript class array

<<: Linux kernel device driver Linux kernel module loading mechanism notes summary

>>: A brief discussion on common operations of MySQL in cmd and python

Getting Started Tutorial on Using TS (TypeScript) in Vue Project

JavaScript implements the protocol example in which the user must check the box

Getting Started Tutorial on Using TS (TypeScript) in Vue Project

js dynamically generates tables (node operations)

Detailed explanation of the encapsulation and use of the Vue image magnifier component

js canvas realizes rounded corners picture

Linux installation MySQL5.6.24 usage instructions

Detailed tutorial on installing Nginx 1.16.0 under Linux

How to use mysql to complete the data generation in excel

Working principle and implementation method of Vue instruction

The easiest way to create a new user and grant permissions to MySQL

CSS realizes process navigation effect (three methods)

Recommend

Solution to the Chinese garbled code problem in the decompressed version of MYSQL

Detailed explanation of the process of building an MQTT server using Docker

Solve the problem that the element DateTimePicker+vue pop-up box only displays hours

How to optimize MySQL query speed

MySQL 8.0.19 Installation Tutorial

Description of the hr tag in various browsers

Create a custom system tray indicator for your tasks on Linux

CSS scroll bar style modification code

Detailed explanation of routing configuration in Linux system with multiple network cards

Detailed steps for installing JDK and Tomcat on Linux cloud server (recommended)

An example of implementing a simple finger click animation with CSS3 Animation

Vue component library ElementUI implements table loading tree data tutorial

Teach you to quickly build a web cluster project based on nginx

Three ways to achieve background blur in CSS3 (summary)

Element uses scripts to automatically build new components