HTML and CSS Reference
In-Depth Information
Listing 2-2. HTML Markup of the Character Counter Form
<form id="form1" runat="server">
<span>Enter some text :</span>
<br />
<textarea id="textarea" rows="3" cols="50" class="TextArea"></textarea>
<br />
<span class="NormalCounter">Character counter : </span>
<span id="counter" class="NormalCounter"></span>
<br /><br />
<asp:Button ID="submit" runat="server" Text="Submit" OnClick="submit_Click" />
<br />
<asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
The Submit button and the associated message label are server controls. As usual, the CSS classes
used in the markup reside in a style-sheet file. Next, you need to write jQuery code that wires several event
handlers and makes the character counter functional. Listing 2-3 shows the ready() function that wires
event handlers for keyup , blur , and click events. The keyup and blur event handlers ensure that the
number of characters entered in the textarea are less than or equal to the maximum length. They also
update the character count in the corresponding <span> element.
Listing 2-3. Event Wiring of the Character Counter
$(document).ready(function () {
var eventData = {
MaxLength: 20,
Type: 'Remaining',
AllowOverflow: true,
CounterId: 'counter',
NormalCss: 'NormalCounter',
$("#textarea").keyup(eventData, OnKeyUp);
$("#submit").click(function (event) {
if (!conirm("Do you wish to submit the form?")) {
The ready() function is automatically called by jQuery when the entire HTML DOM tree is loaded in
the browser. You can pass your own function to the ready() function that wires event handlers for various
elements such as textarea and <button> . The code declares a variable ( eventData ) that stores configuration
settings you need to pass to the event handlers. Once the event handlers are wired, the eventData object is
automatically passed to the event handlers every time the event is raised. Notice that eventData is a JSON
object and takes the form of key-value pairs. A key and its value are separated by a colon ( : ) and multiple
key-value pairs are delimited by comma ( , ). Table 2-3 explains the purpose of each of the settings of the
eventData object.
Search WWH ::

Custom Search