Usando jQuery, ¿cómo obligo a un visitante a desplazarse hasta la parte inferior de un área de texto para habilitar el botón de enviar?

Question

Tengo un formulario de registro que contiene un área de texto de solo lectura. Deseo solicitar a cualquier visitante que se desplace hasta la parte inferior del área de texto, que contiene los términos y condiciones o el acuerdo de licencia, antes de que el botón de envío esté habilitado para enviar su información.

Aquí está el código CSS de ejemplo:

textarea {  
    width: 240px; 
    height: 200px; 
    overflow-y: scroll; 
} 

Aquí está el ejemplo de código HTML:

<form action="action.php"> 
    <label for="email">Email Address</label><input type="text" id="email" /> 
    <textarea readonly>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea> 
    <input class="submit" type="submit" value="Register your info" id="register"/> 
</form> 

En caso de que el atributo disabled ya se puede poner en la entrada de presentar?

Ya estamos utilizando la biblioteca de jQuery, por lo que me gustaría seguir usando jQuery para permitir que esta validación controle la pregunta de envío. ¡Gracias por su ayuda y sugerencias!

Answer 1

Algo como esto debería funcionar:

$('#terms').scroll(function() { 
    if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) { 
     $('#register').removeAttr('disabled'); 
    } 
}); 

términos se limitan a dar un id, y establecer el botón de registro de personas con discapacidad en el html. También hice un pequeño violín para mostrar que funciona: http://jsfiddle.net/ETLZ8/

Answer 2

usar algo como esto dentro del área de texto:

onscroll="if(this.scrollTop+this.offsetHeight>=this.scrollHeight){/*enable the button*/}" 

Pero lo que si se desactiva JS?

Preferiría un div desplazable con el botón de enviar en la parte inferior. El usuario no puede hacer clic en el botón sin desplazarse al final, sin importar si JS está activado o desactivado.

Answer 3

Otras respuestas funcionan a la perfección, pero he creado un sample con un enfoque ligeramente diferente, que no vincula la capacidad de enviar al botón que está deshabilitado , para que pueda mezclarse con otros validadores y demás.

$(function(){ 

    var terms_were_scrolled = false; 

    $('#terms').scroll(function() { 
     if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) { 
      terms_were_scrolled = true; 
     } 
    }); 

    $('#terms_agreed').click(function(event){ 
     if(!terms_were_scrolled){ 
      alert('you must read all the way to the bottom before agreeing'); 
      event.preventDefault();    
     }    
    }); 

});​ 

HTML:

<form action="#"> 
    <textarea id="terms" cols="100" rows="10"> 
     Lorem Ipsum .... 
    </textarea> 
    <br /> 
    <input type="checkbox" id="terms_agreed"/> I agree 
    <br /> 
    <input type="submit"> 
</form>​ 

Answer 4

Christian Varga's solution es absolutamente correcto, y también se puede aplicar a un div. Sin embargo, si está utilizando un div en lugar de un área de texto, el div NO DEBE tiene ningún relleno o se rompe.

Mi solución para esto fue colocar un div dentro de mi div con estilo (con relleno, esquinas redondeadas y un borde) para detectar el desplazamiento. Por lo tanto:

<div class="styled-div"> 
    <div id="terms"> 
      Lorem ipsum...terms text... 
    </div> 
</div> 
<input type="submit" id="register" value="Register"/> 

El único posible inconveniente de este enfoque es que si se agrega relleno para el div que contiene, la barra de desplazamiento aparece en el div interior, que puede no quedar bien a algunos usuarios.

Answer 5

Lo recomiendo más bien, maneja el zoom mejor.

$('#terms').scroll(function() { 
    if ($(this).scrollTop() + $(this).innerHeight() +2 >= $(this)[0].scrollHeight) { 
     $('#register').removeAttr('disabled'); 
    } 
}); 

La 2 se ocupa de una serie de escenarios de escala cuando scrollTop + innerHeight es marginalmente por debajo scrollHeight (por alguna razón yo soy demasiado perezoso para hacer ejercicio).