2013-03-28 11 views
0

저는 JavaScript를 통해 업데이트 할 입력 텍스트 상자의 하단에 입력 텍스트 상자와 숫자 문자가있는 jsf 2.0 응용 프로그램이 있습니다.inputTextArea IE8에서 포커스 손실

<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> 

는 스크립트 : 문제는 어딘가에 입력 텍스트 상자에 150 자 주위에 입력 한 후입니다

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 ; 
} 

는, 초점은 inputtextbox의 맨 위로 이동합니다. 그러나 커서는 예상대로 끝까지 유지됩니다.

scrollTop 위치를 사용하고 포커스를 시도했지만 작동하지 않았습니다. 모든 제안은 높이 평가됩니다.

이 문제는 IE8에서만 발생합니다. forefox에서는 잘 작동합니다.

+0

호기심에서 countChars 함수를 3 가지 다른 이벤트로 호출하는 이유는 무엇입니까? 왜 그냥 열쇠로 부르지 않는거야? 하나만 해봤 니? 그 행동은 다른 것입니까? – Revent

+0

예, 사용자가 기존 입력 텍스트를 편집하려고 할 때 카운트를 즉시 업데이트해야하고 모든 문자 입력시 카운트를 업데이트해야하기 때문에 포커스와 키 위/아래 키를 호출해야합니다. 나는 한 번만 전화했지만 운이 지쳐서 지쳤다. 아래 줄에 주석을 달아서 작동 시키지만 이것을 가지고 있어야합니다. document.getElementById ('char_count'). innerHTML = 개수; – Vallikranth

+0

btw,이 라인이 질문에 html로 인코딩되었는지는 모르겠지만 (카운트 < 0) {JS에 심볼보다 적은 수의 html 엔티티가 있다면 문제가 될 수 있습니다 ... – Revent

답변

0

이 당신이 찾고있는 해답이 될하지 않을 수 있지만,이 스크립트는 지난 몇 년 동안 저를 잘 역임했다 :

자바 스크립트 :

/* 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> 
관련 문제