.aspx Markup:
<div class="smallDiv"> <h2>Type into this textbox which accepts 50 characters overall</h2> <asp:TextBox ID="tb1" runat="server" TextMode="MultiLine"/> (This textbox accepts only 50 characters) <span id="spn"></span> <asp:Button ID="btnSubmit" runat="server" Text="Submit"/> <span id="error"></span> <br /> Tip: Clicking on the Submit button when number of characters are less than 50, results in a postback to same page. If you exceed 50 characters, the exceeded characters are printed below the textbox and a postback is prevented. </div>
Jquery Script:
<script type="text/javascript"> $(function() { var limit = 50; var $tb = $('textarea[id$=tb1]'); $tb.keyup(function() { var len = $(this).val().length; if (len > limit) { $(this).addClass('exceeded'); $('#spn').text(len - limit + " characters exceeded"); } else { $(this).removeClass('exceeded'); $('#spn').text(limit - len + " characters left"); } }); $('input[id$=btnSubmit]').click(function(e) { var len = $tb.val().length; if (len > limit) { e.preventDefault(); } }); }); </script>
.CSS
.exceeded { background-color:red; }

No comments:
Write comments