Question

我对JavaScript不太了解，请原谅。我有一个网页，用户可以在其中上传.XLS / .CSV并进行审查，然后再将数据提交到我们的数据库。用户可以在单击“提交”之前在“审阅”屏幕中编辑文档的单元格。但是，由于可能有150多个行，因此我想实现一些客户端功能，如果用户对其进行了更改，则该功能会更改文本框的背景颜色。

我能够使用C＃的OnTextChanged事件来完成此操作，但是我希望没有任何回发。

<script type="text/javascript">
   function changeTextBoxColor() {
      $(this).style.backgroundColor = "red";
   }
</script>

文本框是在<asp:Repeater>中实现的，因此我无法在函数中真正实现var v = document.getElementById(...)语句。我正在尝试调用的文本框示例：

<td>
   <asp:TextBox ID="txtRGMNumber" CssClass="faded--input white full"
     OnChange="changeTextBoxColor()" runat="server" Text='<%# Eval("RGM Number") %>'>
  </asp:TextBox>
</td>

在编辑文本框中的文本时，我需要将框的背景色设置为红色而没有回发。

Answer 1

这有点“棘手”，但是我清理得越多，它的作用就越不明显：

<body>
    <form id="form1" runat="server">
        <table>
            <asp:Repeater runat="server" ID="MyRepeater">
                <ItemTemplate>
                    <tr>
                        <td>
                            <asp:TextBox runat="server" Text="Some value" 
                                CssClass="js-changeBackgroundColor" />
                        </td>
                    </tr>
                </ItemTemplate>
            </asp:Repeater>

        </table>
    </form>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(".js-changeBackgroundColor").on("input", function () {
            this.style.backgroundColor = "green";
        });
    </script>
</body>

首先，我们向每个服务器端文本框添加一个CSS类-js-changeBackgroundColor。因此，当每个渲染时，它将包含以下属性：

class="js-changeBackgroundColor"

使用CSS类“标记”项目（而不是实际应用样式）可能已过时。您可能会对其他属性执行相同的操作。但是js-前缀表示该类用于该目的。（前缀实际上不做任何事情，它只是一个约定，以便阅读代码的人可以看到区别。）

然后我们在页面上添加jQuery：

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

最后，我们正在执行一个脚本，该脚本指出与该类一起找到的所有元素，并向它们添加事件处理程序。触发“输入”事件后，将背景颜色更改为绿色：

<script>
$(".js-changeBackgroundColor").on("input",
    function() {
        this.style.backgroundColor = "green";
    });
</script>

这很难被完善，但是您可以将其看作是如何混合服务器端代码和客户端代码而又不会彼此相提并论的介绍。

尽管如此，它们之间仍然会互相踩踏。服务器端代码不“知道”客户端代码更改了背景色。因此，如果您进行回发，背景色将恢复为原来的颜色。

如何在不回发的情况下更改文本中$（this）元素的背景颜色？

1 个答案: