Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.10.2013, 16:15
Интересующийся
Отправить личное сообщение для y0uix Посмотреть профиль Найти все сообщения от y0uix
 
Регистрация: 22.10.2013
Сообщений: 11

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

Причем в финальном варианте работает но очень криво, не происходит измменений счетчика по мере введения символов.

Подскажите пожалуйста что я делаю не так и как лучше сделать, спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 22.10.2013, 16:31
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

1) Нужно навешивать обработчик на oninput (остальные события, такие как oncut onkeyup и тд будут удваивать / утраивать обработку), а при отсутсвтии (IE8) - onpropertychange
2) В свойство oninput нужно записать ссылку на функцию-обработчик. А ты чего делаешь?

Сообщение от y0uix
currentElem.oninput = showCount(idCount, currentElem);
Ты вызываешь функцию showCount и присваиваешь ее результат, то есть undefined (так как она ничего не возвращает). Какой в этом прок?
Во втором варианте уже лучше, но функция-обработчик не получает такие аргументы, какие ты предположил. Ты получишь только один аргумент - объект события типа Event)
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 22.10.2013, 17:29
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Poznakomlus
файлы называйте image1.jpg, image2.jpg... до 20
А это к чему тут?
Сообщение от Poznakomlus
Даниил, а так
А так не все методы ввода обрабатываются. Хотя в большинстве случаев это не критично. Ну и непонятно зачем preventDefault() звать.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #4 (permalink)  
Старый 22.10.2013, 18:51
Интересующийся
Отправить личное сообщение для y0uix Посмотреть профиль Найти все сообщения от y0uix
 
Регистрация: 22.10.2013
Сообщений: 11

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

Хотелось бы услышать еще дельных советов, может быть по оптимизации кода... Спасибо этому сайту.
Ответить с цитированием
  #5 (permalink)  
Старый 22.10.2013, 19:12
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Раз пошла такая пьянка...

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)
__________________
В личку только с интересными предложениями
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменять размер шрифта относительно количества символов winter Общие вопросы Javascript 7 12.06.2019 19:11
Ширина поля input text в зависимости от количества символов rekon87 (X)HTML/CSS 7 14.06.2013 22:55
Контроль ввода текста в форму Derack Events/DOM/Window 11 09.01.2011 01:07