Используя jQuery, как заставить посетителя прокрутить текстовую область до конца, чтобы включить кнопку отправки?

Question

У меня есть регистрационная форма, которая содержит текстовую область только для чтения. Я хочу требовать от любого посетителя прокрутки до нижней части текстовой области, которая содержит положения и условия или лицензионное соглашение, прежде чем кнопка «Отправить» будет доступна для отправки своей информации.

Вот пример кода CSS:

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

Вот пример 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>

Должен ли атрибут disabled уже быть введен во входные данные отправки?

Мы уже используем библиотеку jQuery, поэтому я хотел бы продолжить использовать jQuery, чтобы включить эту проверку для управления вопросом отправки. Спасибо за вашу помощь и предложения!

Answer 1

Примерно так должно работать:

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

Просто дайте термину идентификатор и установите кнопку регистрации в html отключенной. Я также сделал небольшую скрипку, чтобы показать, как она работает: http://jsfiddle.net/ETLZ8/

Answer 2

Я рекомендую это скорее, он лучше справляется с увеличением.

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

+2 обрабатывает несколько сценариев масштабирования, когда scrolltop + innerheight чуть ниже scrollHeight (по какой-то причине мне лень это делать).

Answer 3

Решение Кристиана Варги абсолютно правильно, и может также применяться к div.Однако, если вы используете div вместо textarea, div НЕ ДОЛЖЕН иметь какие-либо отступы, или он ломается.

Мой обходной путь для этого заключался в размещении div внутри моего стиляdiv (с отступами, закругленными углами и рамкой) для обнаружения прокрутки.Итак:

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

Единственный возможный недостаток этого подхода - если вы добавляете заполнение к содержащемуся div, на внутреннем div появляется полоса прокрутки, которая может выглядеть не очень хорошо для некоторых пользователей.

Answer 4

Другие ответы работают отлично, но я собрал образец , используя немного другой подход, который не привязывает способность подчиняться отключенной кнопке, чтобы ее можно было смешиватьс другими валидаторами и т. д.

$(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 5

Используйте что-то подобное внутри текстовой области:

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

Но что, если JS отключен?

Я бы предпочел прокручиваемый div с кнопкой отправки внизу. Пользователь не может нажать кнопку без прокрутки в конце, независимо от того, включен JS или нет.