After long time I'm going to start blogging again. Yes, it's on your favorite
browser IE :). As you know, with HTML 5 there is lots of additional features support for major browsers except IE. However it's nice to hear that IE10 is having more support for HTML 5.
With the HTML 5, maxlength attribute was introduced for textarea HTML element. But IE 8 does not have support for this. I did some work around to find a simple solution for this and seems I found it.
Make sure you are using HTML 5 doctype. Note that I have target only IE here, but not the already support browser for maxlength attribute in teaxtarea elements.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function getCaret(el) {
if (el.selectionStart) {
return el.selectionStart;
} else if (document.selection) {
el.focus();
var r = document.selection.createRange();
if (r == null) {
return 0;
}
var re = el.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return rc.text.length;
}
return 0;
}
function limitPasteData(obj, limit) {
// Do it with Internet Explorer
if (window.clipboardData) {
if (document.selection && document.selection.createRange) {
obj.focus();
var modifiedTxtLen;
// If text has been selected
if (document.selection.createRange().text.length > 0) {
modifiedTxtLen = obj.value.length - document.selection.createRange().text.length + window.clipboardData.getData("Text").length;
if (modifiedTxtLen > limit) {
var neededLen = limit - (obj.value.length - document.selection.createRange().text.length);
document.selection.createRange().text = window.clipboardData.getData("Text").substring(0, neededLen);
return false;
}
} else {
modifiedTxtLen = obj.value.length + window.clipboardData.getData("Text").length;
if (modifiedTxtLen > limit) {
var neededLen = limit - obj.value.length;
var neededTxt = window.clipboardData.getData("Text").substring(0, neededLen);
var mofifiedText = obj.value.substring(0, getCaret(obj)) + neededTxt + obj.value.substring(getCaret(obj), obj.value.length);
obj.value = mofifiedText;
return false;
}
}
// If not exceed limit just paste it
return true;
}
}
}
function limitTypingData(obj, limit) {
// Other browsers may have support for maxlength attribute
if (navigator.appName == 'Microsoft Internet Explorer') {
if (obj.value.length > (limit - 1)) {
if (document.selection && document.selection.createRange) {
obj.focus();
// If only text has been selected, allow to type once
if (document.selection.createRange().text.length > 0) {
return true;
}
}
return false;
}
}
}
</script>
</head>
<body>
<textarea id="txtArea" cols="20" rows="5" maxlength="15"
onpaste="return limitPasteData(this, 15);"
onkeypress="return limitTypingData(this, 15);" ></textarea>
</body>
</html>
But remember that the behavior of these functions in IE8 will not 100% equal to default maxlength behavior of supporting browsers. But we can still do the work with this.
Apart from that I would like to notice you that, new line character(s) may be changed in IE than others. IE always take it as '\n\r' and other browsers may take it as '\n'. So that, either you have to handle that or use additional space from the back end database fields.
Apart from that I would like to notice you that, new line character(s) may be changed in IE than others. IE always take it as '\n\r' and other browsers may take it as '\n'. So that, either you have to handle that or use additional space from the back end database fields.
Have a fun with IE 8 :D
