Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Синхронизация textarea и checkbox (https://javascript.ru/forum/dom-window/35274-sinkhronizaciya-textarea-i-checkbox.html)

georg 05.02.2013 21:03
Синхронизация textarea и checkbox
 
Доброго времени суток!

Мне нужно реализовать связь между textarea и checkbox

чекбокс должен быть неактивен, пока текст не промотан донизу (нельзя поставить галочку).

Скажите, пожалуйста, в какую сторону смотреть. Я никогда подобного эффекта не реализовывал, поэтому пребываю в растерянности.

Спасибо.

Deff 05.02.2013 21:19
Выложите минимальный HTML
И jQuery можно использовать ?

georg 05.02.2013 21:32
Вот минимальный код
<form action="">
    <div class="verification-form-wrap sign">
   
        <textarea id="txt-sign" name="txt-sign" cols="70" rows="10">
        
        TEMPORARY REGISTRATION AGREEMENT
        
        1. I have read andagree to Siberian Health Compensation Plan and Siberian Health products andservices as set forth in official
        Siberian Health literature .....................................................................
                                        
        </textarea>
    <div class="chb-wrapper">
        <input type="checkbox" id="chb-agree" name="chb-agree" />
        <label for="chb-agree" class="lb-agree">I accept all terms and conditions of the contact (please read contract)</label>
    </div>
</form>


jQuery можно использовать, вопрос - на какое событие вешать? Если вешать на потерю фокуса textarea, то это, очевидно, неправильно. А тогда как лучше?

Deff 05.02.2013 21:43
Цитата:
Сообщение от georg
пока текст не промотан донизу
Промотана вся страница до конца или текст в textarea ?
Странно, - что инфа в textarea

georg 05.02.2013 21:57
должен быть промотан текст в textarea.
Инфу в textarea разместили по желанию заказчика.

А вообще как правильно оформить эту страницу, сделать текст в див со скроллом?

Тогда я услышу, что скроллы на пиксель отличаются от дефолтных. Ведь если, например, я размещу текст в div, то надо будет прикручивать полосу прокрутки ScrollPane-ом.

Deff 05.02.2013 22:06
Цитата:
Сообщение от georg
А вообще как правильно оформить эту страницу, сделать текст в див со скроллом?
Ну можно и так ... типо нижний скроллбокс http://mjacksoninfo.userforum.ru/register.php

Хотя имхо - если не через чур длинный текст - просто div без скролла (фиксируем промотку страницы

Deff 05.02.2013 22:14
:lol: При промотки скроллdivа можно вставить checkbox в конец скроллируемого блока с парой <br /> после него ЫЫ

georg 05.02.2013 22:18
Думаете, нет более красивого решения?
Я думал посмотреть в исходниках регистрационных форм годе-то в интеренет-магазинах, но пока почему-то ни одной подобной не нашел, а раньше попадались же на глаза.

Deff 05.02.2013 22:21
Лан - делаем по первичному плану ?

georg 05.02.2013 22:37
да, буду пробовать, потом отпишу

Deff 05.02.2013 23:04 
<!DOCTYPE HTML>
<html>
  <head>
<style>
input[name='chb-agree']:disabled{
  outline: 1px solid red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
  $("input[name='chb-agree']").attr('disabled',true).removeAttr('id')
  var tarea=$("#txt-sign")
  setTimeout( function(){tarea.scrollTop(3000);},20)
  var tareaScroll;
  var timerscroll;
  setTimeout( function(){
       tareaScroll = tarea.scrollTop();
       //alert(tareaScroll);
       tarea.scrollTop(0);


    $("#txt-sign").bind('scroll',function () {
      clearTimeout(timerscroll);
      timerscroll=setTimeout( function(){  //  очистка чрезмерных срабатываний;
         if(tarea.scrollTop()>=tareaScroll-12) {

          $("input[name='chb-agree']").removeAttr('disabled').attr('id','chb-agree');
          $("#txt-sign").ubind('scroll');

          }

      },20)
    });

  },20)

});
</script>
 </head>
  <body>
<form action="">
    <div class="verification-form-wrap sign">
   
        <textarea id="txt-sign" name="txt-sign" cols="70" rows="10">
        
        TEMPORARY REGISTRATION AGREEMENT
        
        1. I have read andagree to Siberian Health Compensation Plan and Siberian Health products andservices as set forth in official
        Siberian Health literature 
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
                                        
        </textarea>
    <div class="chb-wrapper">
        <input type="checkbox" id="chb-agree" name="chb-agree" />
        <label for="chb-agree" class="lb-agree">I accept all terms and conditions of the contact (please read contract)</label>
    </div>
</form>


  </body>
</html>

a_l 05.02.2013 23:24
Deff, можно ведь проще:
http://jsfiddle.net/vsEuc/

Deff 06.02.2013 02:36
a_l,
Cимпатично( чот не пришёл такой путь
Да , нужно отнять десяток пиксел от высоты 
if($(this)[0].scrollTop + $(this).height() >= $(this)[0].scrollHeight-12) {

у некоторых браузов скролл чуть менее высоты

Deff 06.02.2013 02:44
Возможно Ваш элегантней... сплю уже
<!DOCTYPE html>
  <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> - jsFiddle demo</title>
       <style>
          input[name='galochka']:disabled{
          outline: 1px solid red;
       }
     </style>
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
      <link rel="stylesheet" type="text/css" href="/css/normalize.css">
      <link rel="stylesheet" type="text/css" href="/css/result-light.css">
      <style type="text/css">
    textarea{
    width:300px;
    height:100px;
    display:block;
}
  </style>
      <script type="text/javascript">//&lt;![CDATA[ 
$(window).load(function(){
$("input[name=galochka]").attr("disabled", true);
$("textarea").scroll(function() {
    if($(this)[0].scrollTop + $(this).height() >= $(this)[0].scrollHeight-10) {
      $('input[name=galochka]').removeAttr("disabled");  
    }    
});

});//]]&gt;  

</script>
    </head>
    <body style="">
      <textarea>Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
</textarea>
      <input type="checkbox" name="galochka">
    </body>
  </html>

Вот тут без отъёма 10 пиксел не сработало
Но всё одно - данный Ваш код элегантней!

Deff 06.02.2013 02:54
a_l,
Нашел синхронную оплошку в обоих кодах:

При растягивании textarea до лишения скролла - естественно событие не срабатывает и checkbox никогда не раздизаблится
Нун таймаутом изредка проверять высоту textarea и высоту контента

a_l 06.02.2013 11:29
Цитата:
При растягивании textarea до лишения скролла - естественно событие не срабатывает и checkbox никогда не раздизаблится
Есть такое, но можно же запретить ресайз в css:
textarea{ 
  resize: none;
}

Deff 06.02.2013 13:33
Цитата:
Сообщение от a_l
Есть такое, но можно же запретить ресайз в css:
Неудобно, я в частности при длином контексте часто растягиваю, к примеру тут форму ответа.

georg 06.02.2013 19:19
Да, ресайз должен быть запрещен.
Я вчера стал писать по-своему как-то, но a_l действительно предложил элегантное решение, посему использовал его.

Спасибо a_l и deff за помощь. Огромное.


Часовой пояс GMT +3, время: 17:08.