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
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:
|
<<: Linux kernel device driver Linux kernel module loading mechanism notes summary
>>: A brief discussion on common operations of MySQL in cmd and python
Recommend
Vue Element front-end application development to obtain back-end data
Table of contents Overview 1. Acquisition and pro...
How to deploy python crawler scripts on Linux and set up scheduled tasks
Last year, due to project needs, I wrote a crawle...
Example steps for using AntV X6 with Vue.js
Table of contents 0x0 Introduction 0x1 Installati...
Vue+echart realizes double column chart
This article shares the specific code of vue+echa...
Tutorial on installing and configuring MySql5.7 in Alibaba Cloud ECS centos6.8
The default MySQL version under the Alibaba Cloud...
How to stop CSS animation midway and maintain the posture
Preface I once encountered a difficult problem. I...
Invalid solution when defining multiple class attributes in HTML
In the process of writing HTML, we often define mu...
Detailed explanation of the conflict between flex layout and position:absolute/fixed
I encountered this problem before when developing...
Optimizing the slow query of MySQL aggregate statistics data
Written in front When we operate the database in ...
JavaScript ECharts Usage Explanation
I used ECharts when doing a project before. Today...
Detailed explanation of the idea of MySQL trigger detecting a statement in real time for backup and deletion
Problem description: The user has a requirement t...
Vue Router loads different components according to background data
Table of contents Requirements encountered in act...
This article helps you understand PReact10.5.13 source code
Table of contents render.js part create-context.j...
In-depth analysis of Vue's responsive principle and bidirectional data
Understanding object.defineProperty to achieve re...
Example of how to change the line spacing of HTML table
When using HTML tables, we sometimes need to chan...