jQuery'yi kullanarak, bir ziyaretçiyi etkinleştirmek için ziyaretçiyi bir textarea'nın altına kaydırmaya nasıl zorlayabilirim?

Question

Salt okunur bir metin içeren bir kayıt formum var. Gönderen düğmenin bilgilerini göndermek için etkinleştirilmeden önce, ziyaretçilerin şartlar ve koşullar veya lisans sözleşmesi içeren tekstillere kaydırılmasını istiyorum.

İşte örnek CSS kod:

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

İşte örnek HTML kod:

<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 nitelik hala teslim girişine koymak mıdır?

JQuery kitaplığını zaten kullanmaktayız, bu nedenle gönderim sorusunu kontrol etmek için bu doğrulamayı etkinleştirmek için jQuery'yi kullanmaya devam etmek istiyorum. Yardımlarınız ve önerileriniz için teşekkürler!

Answer 1

şey çalışmalıdır. Bunu göstermek için küçük bir keman yaptım: http://jsfiddle.net/ETLZ8/

Answer 2

textarea içine böyle

Kullanım şey: JS devre dışı

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

Ama ne olur?

Alt taraftaki gönderme düğmeli kaydırılabilir bir div tercih ederim. Kullanıcı, JS açık veya kapalı olursa olsun, sonunda kaydırma yapmadan düğmeyi tıklayamaz.

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

Basitçe terimlerini bir kimliği verin ve html engelliler için kayıt düğmesine ayarlayın: Böyle

Answer 3

Diğer cevaplar mükemmel çalışıyor, ancak biraz farklı bir yaklaşım kullanarak bir sample numaralı bağlantıyı bir araya getirdim. Böylece diğer geçerlilik sağlayıcıları ve benzeri ile karıştırılabilir.

$(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 kesinlikle doğru olduğunu ve aynı zamanda bir div uygulanabilir. Ancak, bir textarea yerine bir div kullanıyorsanız, , NOT'u üzerinde herhangi bir dolgu yoktur veya bozulur.

Bunun için geçici çözümüm, kaydırmayı algılamak için stillenmiş div'umun içine (dolgu, yuvarlanmış köşeler ve bir kenarlık) bir div yerleştirmekti. Yani: Eğer bulundukları div için dolgu eklerseniz

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

Bu yaklaşımın tek dezavantajı ise, kaydırma çubuğu bazı kullanıcılar için iyi görünmeyebilir iç div görünür.

Answer 5

Bunu tavsiye ederim, daha iyi yakınlaştırır.

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

+2 scrolltop + innerHeight scrollHeight altında marjinal bir kaç ölçekleme senaryoları kolları (Ben çalışmak için tembel nedense).