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

Answer 2

您的代码仅适用于Chrome。在所有其他浏览器中，disabled表单元素不会引发scroll事件，因此您的逻辑永远不会触发。

要解决此问题，您可以改用readonly，以使用户无法修改textarea的内容，但仍会根据需要触发scroll事件：

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

未捕获Textarea滚动事件

2 个答案: