In web pages which take input/feedback from the customers it’s a good idea to limit the type and size of data that can be entered so that spam can be avoided.
Let see how we can limit the number of characters that can be entered in a text box.
The simplest approach I follow is to use the jQuery “Limit” plugin. Click here to download the plugin.
Suppose we have a web form as shown below:
<!DOCTYPE html> <html> <head> <title>Feedaback Form</title> </head> <body> <form id="feedback-form" method="post" action=""> <label for="feedback">Feedback<span class="mandatoryField">*</span></label> <textarea id="feedback" name="feedback" rows="5" cols="15"></textarea> <input type="submit" value="submit"> </form> </body> </html>
Now to use the plugin we first need to include the jQuery and the plugin library in our web page and then call the limit function.
So the above HTML code becomes:
<!DOCTYPE html>
<html>
<head>
<title>Feedaback Form</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.limit-1.2.js"></script>
<script type="text/javascript">
//<![CDATA[
var climit=500;
jQuery(document).ready(function(){
jQuery('#content').limit(climit,'#numleft');
});
//]]>
</script>
</head>
<body>
<form id="feedback-form" method="post" action="">
<label for="feedback">Feedback<span class="mandatoryField">*</span></label>
<textarea id="feedback" name="feedback" rows="5" cols="15"></textarea>
<div id="counter">You have <span id="numleft"></span> chars left.</div>
<input type="submit" value="submit">
</form>
</body>
</html>
If you do not need to show the number of characters left then you can delete the “div” with id “counter” and just make the following call
<script type="text/javascript">
//<![CDATA[
var climit=500;
jQuery(document).ready(function(){
jQuery('#content').limit(climit);
});
//]]>
</script>
If you prefer to use prototype.js instead of jQuery then you can do it as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Feedaback Form</title>
<script type="text/javascript" src="/js/prototype/prototype.js"></script>
<script type="text/javascript">
//<![CDATA[
var climit=10;
document.observe("dom:loaded", function() {
var remainedChars = (climit) - $('feedback').value.length;
if (remainedChars < 0) {
remainedChars = 0;
}
$('numleft').update(remainedChars);
Event.observe('feedback', 'keyup', function (event) {
limitText(this);
});
Event.observe('feedback', 'keydown', function (event) {
limitText(this);
});
});
function limitText(textElement) {
if (textElement.value.length > climit) {
textElement.value = textElement.value.substring(0, climit);
} else {
$('numleft').update((climit) - textElement.value.length);
}
}
//]]>
</script>
</head>
<body>
<form id="feedback-form" method="post" action="">
<label for="feedback">Feedback<span class="mandatoryField">*</span></label>
<textarea id="feedback" name="feedback" rows="5" cols="15"></textarea>
<div id="counter">You have <span id="numleft"></span> chars left.</div>
<input type="submit" value="submit">
</form>
</body>
</html>
Here is an example using javascript without any library:
<!DOCTYPE html>
<html>
<head>
<title>Feedaback Form</title>
<script type="text/javascript">
//<![CDATA[
function limitText(textElement, countElement, limit) {
if (textElement.value.length > limit) {
textElement.value = textElement.value.substring(0, limit);
} else {
countElement.innerHTML = limit - textElement.value.length;
}
}
//]]>
</script>
</head>
<body>
<form id="feedback-form" method="post" action="">
<label for="feedback">Feedback<span class="mandatoryField">*</span></label>
<textarea id="feedback" name="feedback" rows="5" cols="15" onKeyDown="limitText(this,document.getElementById('numleft'),500);"
onKeyUp="limitText(this,document.getElementById('numleft'),500);" ></textarea>
<div id="counter">You have <span id="numleft">500</span> chars left.</div>
<input type="submit" value="submit">
</form>
</body>
</html>
Leave a Comment