JQuery: Synchronize Two ASP.NET Text Boxes

• Live demo here
• Download code here

“The central concept behind jQuery is – find something, do something. More specifically, select DOM element(s) from an HTML document and then do something with them using jQuery methods. This is the big picture concept.” ___________________________Cody Lindley(jQuery Succinctly)

Introduction

As the title suggests, this post is about interacting with two ASP.NET text boxes. If any change/interaction happens to one of the text boxes, then we’ll try to do the same to the other text box, programmatically.

Designing the UI

Let’s start with a new WebForm. The UI in this case requires only two multiline text boxes separated by some white spaces. To keep things simple, we’ll concentrate on ‘how it works’ rather than ‘how it looks’. Now, the above quotation indicates that we need to find something and do something and thus it is a two step process. Here the ‘something’ is the text boxes and we can find them by their ids, class, tag, type, etc. Particularly for this example, we’ll employ the find by class trick. So, we need to mention the same CssClass for both the text boxes and the thing to notice is- this class may not exist at all.

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

Writing the Code

In the script part, we’ll code for two things-

• Synchronizing the text typed into one text box with the other
• Synchronizing the scrolling in both the text boxes

So, we will write two functions for these two specific actions. The first operation can be done on keyup event and the second with scroll event.

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

Result

As I have already said, we can demonstrate two operations:

• Typing anything into one of the text boxes will result in displaying the same text in the other text box, simultaneously.
• Type few lines of code so that the scroll bar is visible. Now when we scroll any of the text boxes using either keyboard or mouse, the other one will be scrolled automatically.

Explanation

We have embedded our code inside $(document).ready() function as this function is executed after the DOM is loaded and before the page contents are rendered into the browser. We can define a common function for both the textboxes with the use of CssClass name. The first action is defined inside the keyup event so that when we release the key, the action will be performed. The action here is nothing but copying the content of the current text box to the other. The val() with no argument returns the value of the text box and when some argument is passed to it, sets the argument as value of that text box. I hope this made the thing very clear and further explanation is not required. Now consider the second action. The scroll() event is fired when we try to scroll the content of text box either through key board or mouse. Again, scrollTop() with zero argument returns the current scroll position but, sets the scroll positions to a value which is the same as the argument if called with an argument.

Conclusion

Now we are able to develop a page with two text boxes which are synchronized upon typing text in to them or using the scroll bar. We can use more than two text boxes and it will still work as long as we use a common CssClass for them.

I hope you have enjoyed reading this post. Your feedback is very important to me.

CodeProject