Parfois, les installateurs de logiciels vous forcent à faire défiler jusqu'à la fin du CLUF avant que la case "J'accepte" soit activée. Comment puis-je produire le même effet sur une page Web?Javascript pour faire défiler jusqu'à la fin
<html>
<head>
<script type="text/javascript">
function setupPage() {
var agreement = document.getElementById("agreetext");
var visibleHeight = agreement.clientHeight;
var scrollableHeight = agreement.scrollHeight;
if (scrollableHeight > visibleHeight) {
var checkbox = document.getElementById("agreebox");
checkbox.checked=false;
checkbox.disabled=true;
agreement.onscroll = handleScroll;
}
}
function handleScroll() {
var agreement = document.getElementById("agreetext");
var visibleHeight = agreement.clientHeight;
var scrollableHeight = agreement.scrollHeight;
var position = agreement.scrollTop;
if (position + visibleHeight == scrollableHeight) {
document.getElementById("agreebox").disabled=false;
}
}
</script>
</head>
<body>
<form>
<textarea id="agreetext" rows="8" cols="40">Long agreement</textarea>
<br/><br/>
<input type="checkbox" id="agreebox" value="true"/> <label id="agreelabel" for="agreebox">I agree</label>
<br/><br/>
<input type="submit" value="Continue"/>
</form>
<script type="text/javascript">
// We put this at the end of the page rather than in an document.onload
// because the document.onload event doesn't fire until all images have loaded.
setupPage();
</script>
</body>
</html>
excellent morceau de code, si vous voulez aussi changer la couleur de l'étiquette à côté de la case à cocher, il suffit de modifier le code comme suit:
function setupPage() {
var agreement = document.getElementById("agreetext");
var visibleHeight = agreement.clientHeight;
var scrollableHeight = agreement.scrollHeight;
if (scrollableHeight > visibleHeight) {
var checkbox = document.getElementById("agreebox");
checkbox.checked=false;
checkbox.disabled=true;
document.getElementById("agreelabel").style.color = "#777";
agreement.onscroll = handleScroll;
}
}
function handleScroll() {
var agreement = document.getElementById("agreetext");
var visibleHeight = agreement.clientHeight;
var scrollableHeight = agreement.scrollHeight;
var position = agreement.scrollTop;
if (position + visibleHeight == scrollableHeight) {
document.getElementById("agreebox").disabled=false;
document.getElementById("agreelabel").style.color = "black";
}
}
J'ai utilisé un textarea en lecture seule pour afficher mon accord de licence. Notez que ce code ne fonctionnera pas si le texte du contrat de licence n'est pas assez long pour que la zone de texte affiche une barre de défilement.
$(function() {
var serviceAgreementScrolled = false;
$('#service-agreement-textarea').scroll(
function() {
if (this.scrollTop + $(this).height() + 30 >= this.scrollHeight) {
serviceAgreementScrolled = true;
}
}
);
$('#accept-service-agreement-checkbox').change(
function() {
if ($(this).is(':checked') && !serviceAgreementScrolled) {
alert('Please scroll to read the rest of the service agreement.');
$(this).prop('checked', false);
}
}
);
});
<textarea id="service-agreement-textarea" readonly="readonly">Long long text here</textarea>
<label>
<input type="checkbox" id="accept-service-agreement-checkbox" />
I accept the terms of the service agreement
</label>
Pourquoi voudriez-vous faire ?? Sans vouloir vous offenser, mais c'est le "trait" le plus ennuyeux et le plus inutile! –
Je suppose que c'est la seule réponse valide :) –
Pour l'enregistrement, cela me rendrait fou. – scunliffe