13 марта 2011 г.

Подсчёт введённых символов при помощи javascript

Пусть у нас на странице есть поле ввода (однострочное или многострочное) и у него есть заранее известный id. Нам нужно подсчитывать количество символов и отображать это значение на экране. Это делается легко и просто при помощи javascript. Напишем такую функцию:


function CalculateCharsInTextArea(TextElementId, CaptionElementId) {
var textControl = document.getElementById(TextElementId);
var s = textControl.value;
var captionControl = document.getElementById(CaptionElementId);
captionControl.innerText = "Введено " + s.length + " символов";
}

Первый параметр - это id текстового поля, второй параметр - id элемента, на котором требуется отображать количество символов. Это может быть практически любой элемент, даже простой div. Полдела сделано.

Теперь нужно вызывать эту функцию каждый раз, когда изменяется текст в поле ввода. Кажется логичным, что эту функцию следует вызывать в событии onchange. Однако не тут-то было. Работает как-то глючно и отображается неправильное количество символов. Методом проб и ошибок я выявил правильное событие - это onkeyup. Данное событие наступает после того, как пользователь отпустит нажатую клавишу. Тогда количество символов отображается корректно и в любом браузере.

Пример html разметки для вызова функции:

<input type="text" id="txtMessage" onkeyup="CalculateCharsInTextArea('txtMessage', 'txtCharCount')" value="" />
<span id="txtCharCount"></span>

4 комментария:

  1. Спасибо за решение, но есть одно но, в лисе не работает, как лечить?

    ОтветитьУдалить
  2. Как сделать чтобы считал слова?

    ОтветитьУдалить
    Ответы
    1. Самый банальный способ - разделить строку по пробелам и преобразовать в список. Кол-во элементов списка и будет количеством слов.

      Удалить