2013-03-28 4 views
0

У меня есть приложение jsf 2.0, в котором у меня есть текстовое поле ввода и число символов слева от счетчика внизу текстового поля ввода, которое я обновляю через javascript.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> 

Сценарий:

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

Проблема заключается после ввода где-то около 150 символов в текстовом поле ввода, фокус смещается назад к верхней части inputtextbox. Однако курсор остается в конце, как ожидалось.

Я пробовал использовать положение scrollTop и фокус, но не работал. Любое предложение высоко ценится.

Эта проблема возникает только в IE8, в forefox она отлично работает.

+0

Просто из любопытства, зачем вызывать функцию countChars на трех разных событиях? Почему бы просто не называть его ключом? Вы пробовали только один? Поведение другое? – Revent

+0

Да, мне нужно называть его фокусом и клавишей вверх/вниз, потому что если пользователь пытается отредактировать существующий входной текст, счет нужно обновить сразу, а также на каждом входе персонажа счет должен быть обновлен. Я устал звонить только один раз, но не повезло. комментарий ниже строки заставляет его работать, но мне нужно это иметь. document.getElementById ('char_count'). innerHTML = count; – Vallikranth

+0

Кстати, не уверен, что эта строка только html-кодирована в вашем вопросе, но if (count < 0) {может быть проблемой, если у вас есть объект html для символа меньше, чем в JS ... – Revent

ответ

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> 
Смежные вопросы