Activar campo de un formulario al hacer scroll en Javascript

en JavascriptScrollJquery

Obligar a un usuario a leer los términos y condiciones con JQuery

En qualquier formulario de registro de una web que ofrezca algun servicio o guarde datos, es común que un usuario deba aceptar los términos y condiciones de uso, avisos legales, etc. Aunque estadísticamente está comprobado que los usuarios no suelen leer estos textos, como desarrolladores podemos poner algun pequeño obstáculo para que al menos no se diga que no se ha intentado.

Con el siguiente código Javascript podemos hacer que se active el botón HTML de enviar el formulario una vez el usuario haya hecho scroll hasta el final de la caja que contenga el texto.

Es un ejemplo muy simple, pero hemos usado Javascript y JQuery para facilitar el acceso a los elementos HTML de la página

Cargar la librería JQuery, entre los elementos HEAD de HTML

<script src="jquery.js" type="text/javascript"></script>

Caja donde pondremos los términos de uso, o texto legal. En vez de utilizar un textarea, debemos utilizar un elemento DIV.

1
2
3
<div id="terminos" onscroll="comprobar()" style="overflow:scroll;width:200px;height:100px;">
Principio <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />Final
</div>

También hemos puesto dentro del atributo onscroll la llamada a la función comprobar() para que cuando este mismo evento Javascript "onScroll" ocurra, podamos controlarlo.

A continuación escribimos el campo que estará deshabilitado hasta que no se llegue al final del DIV haciendo scroll. En el ejemplo hemos puesto un botón, pero bien podría ser un checkbox.

<input disabled="disabled" id="aceptar_condiciones" name="aceptar_condiciones" type="button" value="Enviar" />

Finalmente la función que habilita el botón una vez se llega al final del texto.

1
2
3
4
5
6
7
8
<script type="text/javascript">
  var terms = document.getElementById("terminos");
  function comprobar(){
    if(terms.scrollHeight == (terms.scrollTop + terms.clientHeight)){
      $("#aceptar_condiciones").removeAttr("disabled");
    }
  }
</script>

Prohibida la reproducción total o parcial de este artículo sin el previo consentimiento de Webtutoriales.com

Comentarios