2021-05-12 14:32:11
javascript實現使用者必須勾選協定範例講解
2021-03-19 19:09:08
在js中設定使用者必須閱讀完某項協定 才能勾選登陸或註冊 (disabled的使用技巧)
仔細觀看兩張圖片畫圈部分是不一樣的
當滾輪在上面時下面的表單是不可選中的
第二張在底部表單是可選中的
其中方法為為監聽這個滾輪,當滾輪到達底部時 表單變為可選中狀態
info.scrollHeight - info.scrollTop == info.clientHeight //判斷滾條是否到達了底部
<!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(){ /* *垂直卷軸到底時表單項可用 * onscroll * 該事件會在卷軸捲動時觸發 * */ var info = document.getElementById("info"); var inputs = document.getElementsByTagName("input"); info.onscroll = function(){ //檢查卷軸是否捲動到底了 if(info.scrollHeight - info.scrollTop == info.clientHeight){ //卷軸到底表單項可用 inputs[0].disabled = false; inputs[1].disabled = false; } } } </script> <title></title> </head> <body> <h1>歡迎新使用者註冊</h1> <p id="info">親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊 親愛的使用者請仔細閱讀一下協定如果不仔細你將不能成功註冊</p> <input type="checkbox" name="" id="" value="" disabled="disabled"/>我已仔細閱讀協定,一定遵守 <input type="submit" value="註冊" disabled="disabled"/><!-- 如果為表單新增disabled="disabled則表單項將變成不可用的狀態--> </body> </html>
這個方法在chrome中不適用,其它瀏覽器均可
到此這篇關於javascript實現使用者必須勾選協定範例講解的文章就介紹到這了,更多相關javascript實現使用者必須勾選協定內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!
相關文章