Introduction: In this article I am going to share how to count the number of words
being entered and limit the words to
desired number while typing in asp.net textbox,
multiline textbox, HTML input or textarea field using jQuery without any
plugin.
In previous articles i explained Jquery to limit and display number of characters left in multiline textbox and Jquery to expand or resize multiline textbox on mouse over and mouse out and Auto resize textarea or asp.net multiline textbox based on content using javascript and Change background and border color of asp.net textbox and multiline textbox on focus using css and Convert text to uppercase or lower case while typing in textbox using css
Implementation: Let’s create a
demo example for demonstration purpose.
HTML Source Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
type="text/javascript">
$(function () {
var maxWords = 10;
var wordCounts = {};
$(".txt").keyup(function
() {
var matches = this.value.match(/\b/g);
wordCounts[this.id] = matches ?
matches.length / 2 : 0;
var totalCount = 0;
$.each(wordCounts, function
(k, v) {
totalCount += v;
});
if (totalCount > maxWords) {
$(".txt").val(this.value.slice(0, -2));
totalCount = totalCount -
1;
}
$('#lblWordCount').text('Total Words: ' + totalCount);
}).keyup();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox
ID="txtComment" CssClass="txt" runat="server" TextMode="MultiLine"
Rows="4" Columns="50" onselectstart="return false" onpaste="return false;"
onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete="off"></asp:TextBox>
<br />
<label
id="lblWordCount"></label>
</div>
</form>
</body>
</html>
Note:
I have added the attributes onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete="off" to the textbox to prevent cut, copy, paste,
text drag and drop, text selections, and the auto complete feature.
So users has to manually type in the textbox and the jQuery script will count
the words entered and limit it to specified 10 words.
Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin 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..