First off lets look at the straightforward HTML file. We set up a form to hold our input fields, only the 'textarea' is used in this example.
Here is the Html File which has the form we will use.
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>maxchars</title>
<script type="text/javascript" src="maxchars.js"></script>
<link type="text/css" rel="stylesheet" href="maxchars.css">
</head>
<body>
<div id="wrapper">
<form id="myform" action="submit.php">
<p><label for="name">Name</label>
<input type="text" name="name" id="name"></p>
<p><label for="email">Email</label>
<input type="text" name="email" id="email"></p>
<p><label for="msg">Message</label>
<textarea name="message" id="message" cols="50"
rows="8" maxlength="50"></textarea>
<span id="limiter"></span></p>
</form>
</div>
</body>
</html>
The 'maxlength' attribute is deprecated, but for this example we will use it.
That is all there is to the HTML, next we begin working with the Javascript.
For this example we will 'wrap' the entire script into a master object, this is done to keep all variable self-contained and will not interfere with other scripts on the page.
Here is the Javacript in full for all those copy & paste people.
PHP:
var maxChars = {
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
addEvent: function(elm, evType, fn, useCapture) {
if(elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
} else if(elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
},
attVal: function(element, attName) {
return parseInt(element.getAttribute(attName));
},
init: function() {
if(!document.getElementsByTagName || !document.getElementById) {
return;
}
maxChars.form = document.getElementById('myform');
maxChars.textarea = document.getElementById('message');
maxChars.maxlength = maxChars.attVal(maxChars.textarea, 'maxlength');
maxChars.limit_span = document.getElementById('limiter');
maxChars.limit_span.innerHTML = '<strong>' + maxChars.maxlength + '</strong>'
+ ' characters remaining.';
maxChars.addEvent(maxChars.textarea, 'keyup', maxChars.countlimit, false);
},
countlimit: function(e) {
var placeholder;
var lengthleft = maxChars.maxlength - maxChars.textarea.value.length;
if(e && e.target) {
placeholder = e.target;
}
if(window.event && window.event.srcElement) {
placeholder = window.event.srcElement;
}
if(!placeholder) {
return;
} else if(lengthleft < 0) {
maxChars.textarea.value = maxChars.textarea.value
.substring(0, maxChars.maxlength);
} else if(lengthleft > 1) {
maxChars.limit_span.innerHTML = '<strong>' + lengthleft + '</strong>'
+ ' characters remaining.';
} else {
maxChars.limit_span.innerHTML = '<strong>' + lengthleft + '</strong>'
+ ' character remaining.';
}
}
}
maxChars.addEvent(window, 'load', maxChars.init, false);
Now lets run through the code to get an understanding of how it works.
This is used to define the object and get things started
The initial function called when the page loads. Check to see if 'DOM' elements are available and if they aren't exit the script. We then grab the id of the form, textarea and span tag that display the remaining characters. The last step in this function is to set up a key listener event.
PHP:
init: function() {
if(!document.getElementsByTagName || !document.getElementById) {
return;
}
maxChars.form = document.getElementById('myform');
maxChars.textarea = document.getElementById('message');
maxChars.maxlength = maxChars.attVal(maxChars.textarea, 'maxlength');
maxChars.limit_span = document.getElementById('limiter');
maxChars.limit_span.innerHTML = '<strong>' + maxChars.maxlength + '</strong>'
+ ' characters remaining.';
maxChars.addEvent(maxChars.textarea, 'keyup', maxChars.countlimit, false);
},
For multiple browser support we will use a function to assign event listeners. IE uses on'eventname' where standards browsers use 'eventname'.
PHP:
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
addEvent: function(elm, evType, fn, useCapture) {
if(elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
} else if(elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
},
This function will be used to get our 'deprecated' element later on in the script. It simply returns the value of the passed in element.
PHP:
attVal: function(element, attName) {
return parseInt(element.getAttribute(attName));
},
Our last function in this script is to count and return the remaining characters.
PHP:
countlimit: function(e) {
var placeholder;
var lengthleft = maxChars.maxlength - maxChars.textarea.value.length;
Check to see if the element is available. We use the tertiary condition to simply check for the event in a cross-broswer manner.
PHP:
if(e && e.target) {
placeholder = e.target;
}
if(window.event && window.event.srcElement) {
placeholder = window.event.srcElement;
}
Check to see if an event exists and if it does continue on with the rest of the script. If the remaining length is less than 0(zero) change the string to be grammatically correct
PHP:
if(!placeholder) {
return;
} else if(lengthleft < 0) {
maxChars.textarea.value = maxChars.textarea.value
.substring(0, maxChars.maxlength);
} else if(lengthleft > 1) {
maxChars.limit_span.innerHTML = '<strong>' + lengthleft
+ '</strong>' + ' characters remaining.';
} else {
maxChars.limit_span.innerHTML = '<strong>' + lengthleft
+ '</strong>' + ' character remaining.';
}
}
Finally end the object
thanks
