Attivazione checkbox a fine scorrimento textarea

**Lollo_090** · 19-01-2013, 13:10

Salve a tutti, sono nuovo... spero che mi possiate aiutare. Devo creare una pagina di registrazione, con l'accettazione di un regolamento. Per accettare il regolamento ho inserito una checkbox, che però ho la necessità di attivare solo se il regolamento è stato letto per intero, quindi se la scrollbar è arrivata a fine corsa. Qualcono di voi ha qualche idea? Esiste una proprietà per controllare lo scorrimento della scrollbar di una textarea?

Grazie in anticipo!

**lucavizzi** · 19-01-2013, 14:27

Questa soluzione utilizza jQuery, l'unico vincolo è che l'altezza della textarea deve essere definita in-line (E' necessaria l'altezza senza padding e border):

codice:

<textarea style="height:...;"....

(In alternativa si potrebbe usare una funzione che ricava la proprietà css "height")

codice:

<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Textarea Scroll</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var maxScroll=Number(document.getElementById('tarea').scrollHeight);
	$('#tarea').scroll(function(){
		var scrollAmount=Number($('#tarea').scrollTop())+Number($('#tarea').css('height').replace('px',''));
		if(scrollAmount==maxScroll){$('#cbox').attr('disabled',false)}
	});
});
</script>
</head>

<body>
<textarea id="tarea" rows="10" cols="80" style="width:350px; height:80px; padding:5px;">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </textarea>

<label><input type="checkbox" name="" value="" id="cbox" disabled required> cbox label</label>
</body>
</html>

**cavicchiandrea** · 19-01-2013, 15:37

La mia soluzione http://webandylab.altervista.org/regole.html non ha il problema segnalato da Luca

**lucavizzi** · 19-01-2013, 16:13

Originariamente inviato da cavicchiandrea
La mia soluzione http://webandylab.altervista.org/regole.html non ha il problema segnalato da Luca

Sia la mia che la tua versione funzionano solo su Firefox (Ho testato su IE10, Chrome, Safari e Opera).
Una soluzione crossbrowser sembra essere l'utilizzo di offsetHeight, invece della proprietà css "height", in quanto tiene conto anche del padding e dei border.

Questa soluzione non richiede uno stile in linea per la height.

codice:

<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Textarea Scroll</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var maxScroll=Number(document.getElementById('tarea').scrollHeight);
	$('#max').val(maxScroll);
	$('#tarea').scroll(function(){
		var scrollAmount=Number($('#tarea').scrollTop())+Number(document.getElementById('tarea').offsetHeight);
		$('#amo').val(scrollAmount);
		if(scrollAmount>=maxScroll){$('#cbox').attr('disabled',false)}
	});
});
</script>
</head>

<body>
<textarea id="tarea" rows="10" cols="80" style="width:350px; height:80px; padding:5px;">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </textarea>

<label><input type="checkbox" name="" value="" id="cbox" disabled required> cbox label</label>
MaxScroll<input id="max">
ScrollAmount<input id="amo">
</body>
</html>

**carlomarx** · 19-01-2013, 17:38

Variazione sulla soluzione di Andrea…:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pagina senza titolo</title>
<script type="text/javascript">
onload = function () {
	var oNoticeBox = document.createElement("span"), oToBeRead = document.tuoForm.tuaTextarea;

	oNoticeBox.id = "avviso";
	oToBeRead.parentNode[oToBeRead.nextSibling ? "insertBefore" : "appendChild"](oNoticeBox, oToBeRead.nextSibling);

	function checkReading () {
		if (this.scrollHeight - this.scrollTop === this.clientHeight) {
			document.tuoForm.conferma.disabled = document.getElementById("invio").disabled = false;
			oNoticeBox.innerHTML = "Grazie. Ora potrai procedere con la registrazione.";
		} else {
			document.tuoForm.conferma.disabled = document.getElementById("invio").disabled = true;
			document.tuoForm.conferma.checked = false;
			oNoticeBox.innerHTML = "Per proseguire devi leggere il regolamento scorrendo la barra della textarea fino in fondo";
		}
	}

	oToBeRead.onscroll = checkReading;
	checkReading.call(oToBeRead);
}

</script>
<style type="text/css">

#avviso {
	display: block;
	margin-top: 12px;
	border-radius: 5px;
	width:600px;
	padding:5px;
	border-top-width: 2px;
	border-right-width: 1px;
	border-bottom-width: 2px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #7FDF55;
	border-right-color: #7FDF55;
	border-bottom-color: #7FDF55;
	border-left-color: #7FDF55;
}

#regolamento {
	width:600px; height:130px; padding:5px; border:#2A9F00 solid 2px;
}
</style>
</head>

<body>

<form name="tuoForm">

	


		<textarea name="tuaTextarea" id="regolamento">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna. Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim.

Phasellus ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id. Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem, mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta at arcu.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum. Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in ligula. Vivamus vitae urna mauris, eget euismod nunc.

Aenean semper gravida enim non feugiat. In hac habitasse platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et a orci. Donec aliquet volutpat scelerisque.

Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.</textarea>
	</p>

	


		<input name="conferma" type="checkbox" value="regolamento letto e confermato" />
		<input id="invio" type="submit" value="Prosegui" />
	</p>

</form>

</body>
</html>

**Lollo_090** · 19-01-2013, 18:00

Fantastico! Grazie a tutti ragazzi! Soprattutto grazie per la tempestività! Avete risolto a pieno il mio problema. Ciao, grazie ancora!

---

Ho modificato il codice di "carlomarx" a seconda delle mie esigenze e ho aggiunto un controllo per l'eventuale resize della text area. Lo rendo disponibile se a qualcuno dovesse tornare utile. Ciao!

__________________________________________________

<script type="text/javascript">
onload = function () {
var oNoticeBox = document.createElement("span"), oToBeRead = document.tuoForm.tuaTextarea;
oNoticeBox.id = "avviso";
oToBeRead.parentNode[oToBeRead.nextSibling ? "insertBefore" : "appendChild"](oNoticeBox, oToBeRead.nextSibling);

var accetto;

function checkReading () {
if (this.scrollHeight - this.scrollTop === this.clientHeight) {
document.tuoForm.conferma.disabled = document.getElementById("invio").disabled = false;
oNoticeBox.innerHTML = "Grazie. Ora potrai procedere con la registrazione.";
accetto = "true";
//alert(this.offsetHeight);
} else {
if(accetto != "true"){
document.tuoForm.conferma.disabled = document.getElementById("invio").disabled = true;
document.tuoForm.conferma.checked = false;
oNoticeBox.innerHTML = "Per proseguire devi leggere il regolamento scorrendolo fino in fondo";
}
}
}

oToBeRead.onscroll = checkReading;
checkReading.call(oToBeRead);

var textArea = $("#regolamento");

textArea.on("mousedown", function(e) {

});
textArea.on("mouseup", function(e) {

resizeEvent();
});

resizeEvent = function() {
if(textArea.outerHeight() >= 364){

checkReading.call(oToBeRead);
}
};
}

</script>

__________________________________________________

**lucavizzi** · 19-01-2013, 18:10

Posto una versione riveduta e corretta.
La proprietà scrollHeight è influenzata da padding e border in tutti i browser ad eccezione di Firefox (Parlo di IE10 e delle ultime versioni di Firefox, Chrome, Safari e Opera).
Se questa politica verrà mantenuta dai vari marchi non ci è dato di saperlo...

codice:

<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Textarea Scroll</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	if($.browser.mozilla){
		//scrollHeight non è influenzato da padding o border
		var maxScroll=Number(document.getElementById('tarea').scrollHeight)-Number($('#tarea').height());
	}else{
		//scrollHeight è influenzato da padding e border che vanno sottratti. Sono ricavati tramite offsetHeight
		var maxScroll=Number(document.getElementById('tarea').scrollHeight)-Number($('#tarea').height())-(Number(document.getElementById('tarea').offsetHeight)-Number($('#tarea').height()));
	}
	$('#tarea').scroll(function(){
		var scrollAmount=Number($('#tarea').scrollTop());
		if(scrollAmount>=maxScroll){$('#cbox').attr('disabled',false)}
	});
});
</script>
</head>

<body>
<textarea id="tarea" rows="10" cols="80" style="width:350px; padding:10px; border:0px solid #666;">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</textarea>

<label><input type="checkbox" name="" value="" id="cbox" disabled required> cbox label</label>
</body>
</html>

**carlomarx** · 19-01-2013, 18:29

Originariamente inviato da lucavizzi
La proprietà scrollHeight è influenzata da padding e border in tutti i browser ad eccezione di Firefox (Parlo di IE10 e delle ultime versioni di Firefox, Chrome, Safari e Opera).

Ed è giusto che sia così:
http://www.w3.org/TR/cssom-view/#dom...t-scrollheight

Return the computed value of the 'padding-top' property, plus the computed value of the 'padding-bottom', plus the content height of the element.

A scrollHeight e scrollTop si risponde infatti con clientHeight e i conti tornano. Mentre invece il valore height() di jQuery francamente non ho idea a cosa si riferisca, fatto sta che ti costringe a inutili bizantinismi.
La mia soluzione funziona sia con Firefox che con Chrome. Con IE non ho la possibilità di testarla ma a occhio dovrebbe andare.

**lucavizzi** · 19-01-2013, 18:52

Originariamente inviato da carlomarx
invece il valore height() di jQuery francamente non ho idea a cosa si riferisca, fatto sta che ti costringe a inutili bizantinismi.

height() di jQuery restituisce l'altezza di qualunque elemento del DOM (al netto di margin, border e padding) anche se l'altezza non è dichiarata in-line.
Sopperisce quindi all'undefined che si otterebbe tentando di ricavare tale dato tramite, per esempio, document.getElementById('elementId').style.height; che restituisce solo proprietà css dichiarate in linea.

**Lollo_090** · 19-01-2013, 19:30

Scusate in effetti ho fatto un giro inutile. Ecco come ho modificato:

________________________________

<script type="text/javascript">
onload = function () {
var oNoticeBox = document.createElement("span"), oToBeRead = document.tuoForm.tuaTextarea;
oNoticeBox.id = "avviso";
oToBeRead.parentNode[oToBeRead.nextSibling ? "insertBefore" : "appendChild"](oNoticeBox, oToBeRead.nextSibling);

var accetto;

function checkReading () {
if (this.scrollHeight - this.scrollTop === this.clientHeight) {
document.tuoForm.conferma.disabled = document.getElementById("invio").disabled = false;
oNoticeBox.innerHTML = "Grazie. Ora potrai procedere con la registrazione.";
accetto = "true";
//alert(this.offsetHeight);
} else {
if(accetto != "true"){
document.tuoForm.conferma.disabled = document.getElementById("invio").disabled = true;
document.tuoForm.conferma.checked = false;
oNoticeBox.innerHTML = "Per proseguire devi leggere il regolamento scorrendolo fino in fondo";
}
}
}

oToBeRead.onscroll = checkReading;
checkReading.call(oToBeRead);

var textArea = $("#regolamento");

textArea.on("mousedown", function(e) {

});
textArea.on("mouseup", function(e) {

resizeEvent();
});

resizeEvent = function() {
checkReading.call(oToBeRead);
};
}

</script>

________________________________

Discussione: Attivazione checkbox a fine scorrimento textarea

Strumenti discussione

Ricerca discussione

Visualizza

Attivazione checkbox a fine scorrimento textarea

Permessi di invio