javascript - 文本区域滚动事件未被捕获

Question

我有一个包含条款和条件并且可滚动的textarea。当我向下滚动 textarea 时，我想启用一个复选框，用户可以选中该复选框并继续。问题是它不起作用。

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

当我滚动获取 alert("AI O CARALHO") 时，它只是不显示，所以我猜该功能甚至无法正常工作。

Answer 1

您已将 textarea 设置为禁用，这将禁用其中的所有功能。

相反，根本不要使用 textarea 而只使用 div 元素，因为默认情况下它们首先是不可编辑的。您还可以在 if 分支中反转启用/禁用的命令。

$(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">