0

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 &lt; 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.

4

1 に答える 1

0

これはあなたが探している答えではないかもしれませんが、このスクリプトは何年にもわたって役に立ちました。

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>
于 2013-03-28T07:27:36.723 に答える