CODEWITHSUNDEEP
javascriptjqueryasp.net
Mingo Bille
Mingo Bille

Reputation: 71

Textarea scroll event not being caught

I have a textarea that contains terms & conditions and it's scrollable. When I scroll down the textarea I want to enable a checkbox which the user can check and continue. The problem is it isn't working. 

<textarea name="terms" runat="server" id="terms" style="resize:none" disabled="disabled" rows="20" cols="10">
<asp:CheckBox ID="chk_termos" runat="server" Enabled="false" AutoPostBack="true"/>
<script type="text/javascript">
  $(document).ready(function() {
    $("#terms").scroll(function() {
      alert("AI O CARALHO")
      if ($("#terms").scrollTop() > 10) {
        $('#chk_termos').prop('disabled', true);
      } else {
        $('#chk_termos').prop('disabled', false);
      }
    });
  });
</script>

When I even scroll to get the alert("AI O CARALHO") it just doesn't show, so I guess that the function isn't even working.

Upvotes: 0

Views: 1989

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65796

You've got the textarea set to be disabled, which will disable all the functionality within it.

Instead, don't use a textarea at all and just use a div element, since they aren't editable by default in the first place. You've also got your enabled/disabled commands reversed in the if branches.

$(function () {
  $("#terms").scroll(function () {
     //alert("AI O CARALHO")
     if ($("#terms").scrollTop() > 10) {
        $('#chk_termos').removeAttr('disabled');
     } else {
        $('#chk_termos').attr('disabled', 'disabled');
    }
  });
});
#terms { height: 5em; overflow-y:scroll; width:25%; border:1px solid #e0e0e0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="terms">
 Read all of this and scroll to the bottom<br>
 Read all of this and scroll to the bottom<br>
 Read all of this and scroll to the bottom<br>
 Read all of this and scroll to the bottom<br>
 Read all of this and scroll to the bottom<br>
 Read all of this and scroll to the bottom<br>
 Read all of this and scroll to the bottom<br>
 Read all of this and scroll to the bottom<br>
 Read all of this and scroll to the bottom<br>
 Read all of this and scroll to the bottom<br>
</div>
<input type="checkbox" id="chk_termos" disabled="disabled">

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337590

Your code only works in Chrome. In all other browsers disabled form elements do not raise scroll events, so your logic never fires.

To fix this you could use readonly instead, so that the user cannot amend the content of the textarea, yet it still fires the scroll event as required:

$(document).ready(function() {
  $("#terms").scroll(function() {
    $('#chk_termos').prop('disabled', $(this).scrollTop() > 10);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea name="terms" id="terms" style="resize:none" readonly="true" rows="20" cols="10">
Lorem ipsum dolor sita amet consectetur adipscing elit. Lorem ipsum dolor sita amet consectetur adipscing elit. Lorem ipsum dolor sita amet consectetur adipscing elit. Lorem ipsum dolor sita amet consectetur adipscing elit. Lorem ipsum dolor sita amet consectetur adipscing elit. Lorem ipsum dolor sita amet consectetur adipscing elit. Lorem ipsum dolor sita amet consectetur adipscing elit. Lorem ipsum dolor sita amet consectetur adipscing elit. Lorem ipsum dolor sita amet consectetur adipscing elit. Lorem ipsum dolor sita amet consectetur adipscing elit. 
</textarea>
<input type="checkbox" id="chk_termos" name="chk_thermos" />

Upvotes: 0

Related Questions