In this
article I will explain how to use jQuery function to set maximum allowed
characters and also count and display number of remaining characters in multiline
textbox (TextArea) or simple 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 most of the websites, in
contact page there is a column of suggestion or comment with instruction of
characters we can enter. We can do this using jquery or server side control.
Jquery is more convenient i.e. easy to use and fast. Here in this article
example you will learn how to perform this task using jQuery.
Source Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" 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;
$(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:400px;">
<fieldset>
<legend><strong>Enter Limited Character(100 Character only)</strong></legend>
<br
/>
<asp:TextBox ID="txtComments" runat="server" TextMode="MultiLine" Rows="4" Columns="50"
placeholder="Maximum limit: 100 characters" Width="100%"></asp:TextBox><br />
<span id="spnCharLeft"></span>
</fieldset>
</div>
</form>
</body>
</html>
0 comments:
Post a Comment