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

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

Вот пример кода 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, чтобы включить эту проверку для контроля вопроса отправки. Спасибо за вашу помощь и предложения!

Ответ 1

Что-то вроде этого должно работать:

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

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

Ответ 2

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

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

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

Ответ 3

Решение Christian Varga является абсолютно правильным и может также применяться к div. Тем не менее, если вы используете div вместо текстового поля, 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, что может показаться нехорошим для некоторых пользователей.

Ответ 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>

Ответ 5

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

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

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

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