jQuery: 同步两个 ASP.NET 文本框

• 在线演示 这里
• 下载代码 这里

jQuery 的核心概念是 – 找到某物，对其进行操作。 更具体地说，从 HTML 文档中选择 DOM 元素，然后使用 jQuery 方法对其进行操作。 这就是整体概念。” ___________________________Cody Lindley(jQuery Succinctly)

引言

正如标题所示，这篇文章是关于与两个 ASP.NET 文本框进行交互的。 如果其中一个文本框发生任何更改/交互，我们将尝试以编程方式对另一个文本框执行相同的操作。

设计用户界面

让我们从一个新的 WebForm 开始。 在这种情况下，UI只需要两个多行文本框，并用一些空格分隔。 为了保持简单，我们将专注于‘它是如何工作的’，而不是‘它看起来如何’。 现在，上面的引文表明我们需要找到某物并对其进行操作，因此这是一个两步过程。 这里‘某物’是文本框，我们可以通过它们的 id、class、tag、type 等来找到它们。 特别是对于这个例子，我们将采用按 class 查找的方法。 因此，我们需要为两个文本框指定相同的 CssClass，需要注意的是 - 这个 class 可能根本不存在。

<div>
     <asp:TextBox runat="server" ID="TextBox1" CssClass="sync" 
      TextMode="MultiLine" Height="100px" />&nbsp;&nbsp;
     <asp:TextBox runat="server" ID="TextBox2" CssClass="sync" 
      TextMode="MultiLine" Height="100px" />
</div>

编写代码

在脚本部分，我们将为两件事编写代码：

• 将在一个文本框中键入的文本与另一个文本框同步
• 同步两个文本框中的滚动

因此，我们将为这两个特定操作编写两个函数。 第一个操作可以在 keyup 事件上完成，第二个操作可以在 scroll 事件上完成。

<script>
        $(document).ready(function () {
            $(".sync").keyup(function () {
                $(".sync").val($(this).val());
            });
            $(".sync").scroll(function () {
                $(".sync").scrollTop($(this).scrollTop());
            });
        });
</script>

结果

正如我已经说过的那样，我们可以演示两个操作

• 在其中一个文本框中键入任何内容，将导致相同的文本同时显示在另一个文本框中。
• 输入几行代码，使滚动条可见。 现在，当我们使用键盘或鼠标滚动任何一个文本框时，另一个文本框将自动滚动。

解释

我们将代码嵌入到 $(document).ready() 函数中，因为该函数在 DOM 加载完毕并在页面内容渲染到浏览器之前执行。 我们可以使用 CssClass 名称为两个文本框定义一个通用函数。 第一个操作定义在 keyup 事件中，以便我们释放键时执行该操作。 这里操作无非就是将当前文本框的内容复制到另一个文本框。 没有参数的 val() 返回文本框的值，当向它传递参数时，将参数设置为该文本框的值。 我希望这使事情非常清楚，并且不需要进一步的解释。 现在考虑第二个操作。 当我们尝试通过键盘或鼠标滚动文本框的内容时，将触发 scroll() 事件。 同样，没有参数的 scrollTop() 返回当前的滚动位置，但如果使用参数调用，则将滚动位置设置为与参数相同的值。

结论

现在我们能够开发一个包含两个文本框的页面，这些文本框在键入文本或使用滚动条时同步。 我们可以使用两个以上的文本框，只要我们对它们使用通用的 CssClass，它仍然可以工作。

我希望你喜欢阅读这篇文章。 你的反馈对我非常重要。

CodeProject