Контроль количества вводимых в форму символов
Здравствуйте, уважаемые форумчане!
Пишу форму обратной связи и хочу прикрутить счетчик вводимых символов. Найти и подключить jquery-плагин не проблема, - хочу сделать лаконично, производительно и с полным пониманием процесса. В главе про события клавиатуры тут в учебнике (пользуясь случаем хочу выразить глубокую благодарность его автору и переводчику) указан пример кода для простейшего случая -хочу его адаптировать для своего и не совсем получается. Вот выдержки из кода с комментариями:
/* объявляю массив подстрок для последующей генерации айдишников полей формы (3 инпута и одна текстария), переменнную для текущего элемента и переменную для айдишников полей вывода числа символов */
var listTypes = ['name', 'email', 'theme', 'text'], currentElem, idCount;
function showCount(idCount, currentElem) {
document.getElementById(idCount).innerHTML = currentElem.value.length;
}
for ( var k = 0; k < 4; k++ ) {
idCount = 'symbols_' + listTypes[k];
currentElem = document.getElementById(listTypes[k] + '_item');
currentElem.oncut = currentElem.onkeyup = currentElem.oninput = showCount(idCount, currentElem);
// закомментированный код тоже не работает, его пробовал
// подставлять в выражение выше
// function(idCount, currentElem) {
// document.getElementById(idCount).innerHTML = currentElem.value.length;
// };
currentElem.onpropertychange = function(idCount, currentElem) {
if (event.propertyName == "value") showCount(idCount, currentElem);
};
}
Причем в финальном варианте работает но очень криво, не происходит измменений счетчика по мере введения символов. Подскажите пожалуйста что я делаю не так и как лучше сделать, спасибо. |
1) Нужно навешивать обработчик на oninput (остальные события, такие как oncut onkeyup и тд будут удваивать / утраивать обработку), а при отсутсвтии (IE8) - onpropertychange
2) В свойство oninput нужно записать ссылку на функцию-обработчик. А ты чего делаешь? Цитата:
Во втором варианте уже лучше, но функция-обработчик не получает такие аргументы, какие ты предположил. Ты получишь только один аргумент - объект события типа Event) |
Цитата:
Цитата:
|
danik.js, Poznakomlus спасибо, ваши выкладки прояснили для меня ситуацию. Проблему кажется решил, вот код, может кому-то поможет (не без примеси jQuery, связанное однако с тем, что ее я все равно подключаю и хотелось поиск элемента сделать кроссбраузерно).
// у меня четыре текстовых элемента, как я уже писал
objInputElems = {
inputElemName: document.getElementById('name_item'),
inputElemEmail: document.getElementById('email_item'),
inputElemTheme: document.getElementById('theme_item'),
inputElemText: document.getElementById('text_item')
};
function showCount() {
$(this).prev().find('span').text(this.value.length);
}
for ( var key in objInputElems ) {
if (objInputElems.hasOwnProperty(key)) {
objInputElems[key].oninput = showCount;
objInputElems[key].onpropertychange = function() {
if (event.propertyName == "value") showCount();
};
}
}
Хотелось бы услышать еще дельных советов, может быть по оптимизации кода... Спасибо этому сайту. |
Раз пошла такая пьянка...
var selectors = ['#name_item', '#email_item', '#theme_item', '#text_item'];
$(selectors.join()).on('input propertychange', function(event){
$(this).prev().find('span').text(this.value.length);
});
Думаю ничего страшного если не проверять propertyName, тем более что в IE9+ обработка все равно будет вызываться дважды (input+propertychange) |
| Часовой пояс GMT +3, время: 12:26. |