September 05, 2014 HTML , JavaScript , jQuery
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:
04
<
title
>Feedaback Form</
title
>
07
<
form
id
=
"feedback-form"
method
=
"post"
action
=
""
>
08
<
label
for
=
"feedback"
>Feedback<
span
class
=
"mandatoryField"
>*</
span
></
label
>
09
<
textarea
id
=
"feedback"
name
=
"feedback"
rows
=
"5"
cols
=
"15"
></
textarea
>
10
<
input
type
=
"submit"
value
=
"submit"
>
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:
04
<
title
>Feedaback Form</
title
>
06
<
script
type
=
"text/javascript"
src
=
"js/jquery-1.8.3.min.js"
></
script
>
07
<
script
type
=
"text/javascript"
src
=
"js/jquery.limit-1.2.js"
></
script
>
08
<
script
type
=
"text/javascript"
>
12
jQuery(document).ready(function(){
14
jQuery('#content').limit(climit,'#numleft');
22
<
form
id
=
"feedback-form"
method
=
"post"
action
=
""
>
23
<
label
for
=
"feedback"
>Feedback<
span
class
=
"mandatoryField"
>*</
span
></
label
>
24
<
textarea
id
=
"feedback"
name
=
"feedback"
rows
=
"5"
cols
=
"15"
></
textarea
>
26
<
div
id
=
"counter"
>You have <
span
id
=
"numleft"
></
span
> chars left.</
div
>
28
<
input
type
=
"submit"
value
=
"submit"
>
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
01
<
script
type
=
"text/javascript"
>
05
jQuery(document).ready(function(){
07
jQuery('#content').limit(climit);
If you prefer to use prototype.js instead of jQuery then you can do it as shown below:
04
<
title
>Feedaback Form</
title
>
05
<
script
type
=
"text/javascript"
src
=
"/js/prototype/prototype.js"
></
script
>
06
<
script
type
=
"text/javascript"
>
11
document.observe("dom:loaded", function() {
12
var remainedChars = (climit) - $('feedback').value.length;
14
if (remainedChars < 0) {
18
$('numleft').update(remainedChars);
20
Event.observe('feedback', 'keyup', function (event) {
24
Event.observe('feedback', 'keydown', function (event) {
29
function limitText(textElement) {
30
if (textElement.value.length > climit) {
31
textElement.value = textElement.value.substring(0, climit);
33
$('numleft').update((climit) - textElement.value.length);
40
<
form
id
=
"feedback-form"
method
=
"post"
action
=
""
>
41
<
label
for
=
"feedback"
>Feedback<
span
class
=
"mandatoryField"
>*</
span
></
label
>
42
<
textarea
id
=
"feedback"
name
=
"feedback"
rows
=
"5"
cols
=
"15"
></
textarea
>
44
<
div
id
=
"counter"
>You have <
span
id
=
"numleft"
></
span
> chars left.</
div
>
46
<
input
type
=
"submit"
value
=
"submit"
>
Here is an example using javascript without any library :
04
<
title
>Feedaback Form</
title
>
06
<
script
type
=
"text/javascript"
>
08
function limitText(textElement, countElement, limit) {
09
if (textElement.value.length > limit) {
10
textElement.value = textElement.value.substring(0, limit);
12
countElement.innerHTML = limit - textElement.value.length;
19
<
form
id
=
"feedback-form"
method
=
"post"
action
=
""
>
20
<
label
for
=
"feedback"
>Feedback<
span
class
=
"mandatoryField"
>*</
span
></
label
>
21
<
textarea
id
=
"feedback"
name
=
"feedback"
rows
=
"5"
cols
=
"15"
onKeyDown
=
"limitText(this,document.getElementById('numleft'),500);"
22
onKeyUp
=
"limitText(this,document.getElementById('numleft'),500);"
></
textarea
>
24
<
div
id
=
"counter"
>You have <
span
id
=
"numleft"
>500</
span
> chars left.</
div
>
26
<
input
type
=
"submit"
value
=
"submit"
>
Leave a Comment