inputTextArea losing focus in IE8

Question

I have a jsf 2.0 application in which I have an input text box and a number characters left counter at the bottom of input text box which I am updating through javascript.

<h:inputTextarea class="myInputTextClass"
value="#{bean.text}"
style="resize: none;width:445px;" type="text"
maxlength="255" cols="60" rows="3"
onfocus="countChars($('.myInputTextClass'),255)"
onkeyup="countChars($('.myInputTextClass'),255);"
onkeydown="countChars($('.myInputTextClass'),255);"
/>

<span id="char_count" style="font-style:italic;margin-left:-14px">255</span>

Script:

function countChars(element,  max) {

  calculateCount(element.val().length, max);
  if (element.val().length > max) { 
    element.val(element.val().substring(0, max));
   }

  }

function calculateCount(length, max){
 var count = max - length;
    if(count < 0){
    count = 0;
    }
   document.getElementById('char_count').innerHTML =  count ;
}

The problem is after typing in somewhere around 150 characters in the input text box, the focus shifts back to top of inputtextbox. However, the cursor remains at the end as expected.

I tried using the scrollTop position and focus but didn't work. Any suggestion is highly appreciated.

This issue happens only in IE8, in forefox it works fine.

Answer 1

This may not be the answer you are looking for, but this script has served me well over the years:

JavaScript:

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Steve | http://jsmadeeasy.com/ 
http://www.javascriptsource.com/forms/character-counter.html */
function getObject(obj) {
  var theObj;
  if(document.all) {
   if(typeof obj=="string") {
     return document.all(obj);
   } else {
     return obj.style;
   }
 }
 if(document.getElementById) {
   if(typeof obj=="string") {
     return document.getElementById(obj);
   } else {
     return obj.style;
   }
 }
 return null;
}

function toCount(entrance,exit,text,characters) {
 var entranceObj=getObject(entrance);
 var exitObj=getObject(exit);
 var length=characters - entranceObj.value.length;
 if(length <= 0) {
   length=0;
   text='<span class="disable"> '+text+' </span>';
   entranceObj.value=entranceObj.value.substr(0,characters);
 }
 exitObj.innerHTML = text.replace("{CHAR}",length);
}

HTML & PHP:

(<span id="sBann">'.(255 - strlen($values['synopsis'])).' characters left</span>)<br />
<textarea name="synopsis" id="synopsis" rows="3" cols="70" maxlength="255" wrap="soft" onkeyup="toCount(\'synopsis\',\'sBann\',\'{CHAR} characters left\',255);">'.htmlentities($values['synopsis']).'</textarea>