 |
| Click on image to enlarge |
Introduction:
In this article i am going to explain how using jQuery we can set maximum allowed characters and
also count and display number of remaining characters in multiline textbox (TextArea) or
simple textbox while typing in textbox or we can say prevent/avoid/limit the numbers of
characters to be entered in the textbox.
Even you can't copy and paste characters in the
textbox more than the specified limit.
In previous articles i explained How to count and display remaining characters in the multiline textbox in asp.net using javascript and Print page content placed inside DIV tag with print preview using JavaScript in Asp.net and Show image preview before uploading through asp.net fileupload control using jQuery and Upload multiple files or images through one asp.net fileupload control using jQuery plugin and jQuery to Enable,Disable,Show and Hide Asp.net controls based on DropDownList selected value and jQuery to Check Uncheck Select Deselect all items in CheckBoxList on click of Select All CheckBox
Description: While working on
asp.net project i got the requirement to create a web page where users can post
their feedback/suggestion/comments. But i
want to fix the number of characters that can be entered in the textbox and
also want to show remaining characters in textbox. Here in this article example you will learn
how to perform this task easily using jQuery.
Implementation: Below is the HTML Source of the page having
the controls and jQuery script required for this demonstration.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.1.js"
type="text/javascript"></script>
<script type='text/javascript'>
$('#spnCharLeft').css('display',
'none');
var maxLimit = 100;
var maxLimit = 100;
$(document).ready(function () {
$('#<%= txtComments.ClientID %>').keyup(function () {
var lengthCount = this.value.length;
if (lengthCount > maxLimit) {
this.value
= this.value.substring(0, maxLimit);
var charactersLeft = maxLimit - lengthCount + 1;
}
else
{
var charactersLeft = maxLimit - lengthCount;
}
$('#spnCharLeft').css('display', 'block');
$('#spnCharLeft').text(charactersLeft + ' Characters left');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="width:300px;">
<fieldset>
<legend>Enter your feedback/suggestion/comment</legend>
<asp:TextBox ID="txtComments"
runat="server"
TextMode="MultiLine"
Rows="4"
Columns="50"
placeholder="Maximum
limit: 100 characters"></asp:TextBox><br />
<span id="spnCharLeft"></span>
</fieldset>
</div>
</form>
</body>
</html>
Now over to you:
Now over to you:
" I hope you have learned how to prevent entering more characters than the specified limit using jQuery with this example and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..