Контроль количества вводимых в форму символов
Здравствуйте, уважаемые форумчане!
Пишу форму обратной связи и хочу прикрутить счетчик вводимых символов. Найти и подключить 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, время: 04:29. |