Синхронизация textarea и checkbox [Архив форума]

Просмотр полной версии : Синхронизация textarea и checkbox

georg

05.02.2013, 21:03

Доброго времени суток!

Мне нужно реализовать связь между 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

пока текст не промотан донизу
Промотана вся страница до конца или текст в textarea ?
Странно, - что инфа в textarea

georg

05.02.2013, 21:57

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

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

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

Deff

05.02.2013, 22:06

А вообще как правильно оформить эту страницу, сделать текст в див со скроллом?
Ну можно и так ... типо нижний скроллбокс 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">//<![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");
}
});

});//]]>

</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

Есть такое, но можно же запретить ресайз в css:
Неудобно, я в частности при длином контексте часто растягиваю, к примеру тут форму ответа.

georg

06.02.2013, 19:19

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

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