Нещодавно мені потрібно було написати звичайний лічильник символів у поле для тексту (textarea). Завдання тривіальна, але мене зацікавив один нюанс.
Питання в тому, яка подія обробляти?
Користувач може вводити текст як завгодно, за допомогою клавіатури, вставляти з буфера обміну.
Якщо введення відбувається за допомогою клавіатури або з буфера комбінацією клавіш Ctrl + V, то можна обробляти подія onKeyup. Але якщо текст вставлений за допомогою контекстного меню, то onKeyup не працює (дійсно, адже клавіатуру ми не чіпаємо). Точно також не має сенсу обробляти події миші. Адже клік виконується по контекстного меню, а обробник ми призначаємо для textarea.
Подія onChange теж не підходить, тому що воно з'являється після того як textarea втрачає фокус.
В результаті виходить, що відстежити вставку даних через контекстне меню за допомогою цих подій не вийде.
Але я вирішив пошукати. І перш за все, відправився поекспериментувати з формою twitter 'а. Перший же експеримент дав позитивний результат. Вставка через контекстне меню змінила значення лічильника.
Спочатку я подумав, що вони вирішують завдання за допомогою таймера і перевірок довжини поля через заданий інтервал часу. Але потім я помітив, що ця функція працює тільки в FireFox і не працює в IE.
А чим відрізняється Firefox від IE? Звичайно, підтримкою нових стандартів!
Після цього я швидко знайшов потрібну подію. Воно називається input і визначено в специфікації DOM Level 3 Load And Save .
Ця подія виникає відразу після введення будь-яких символів в поле не залежно від способу введення.
Щоб не залишатися голослівним я привожу сторінку, з якої експериментував.
<? Xml version = "1.0" encoding = "UTF-8"?> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/ xhtml1 / DTD / xhtml1-strict.dtd "> <html xmlns =" http://www.w3.org/1999/xhtml "xml: lang =" en "lang =" en "> <head> <title> textArea </ title> <meta http-equiv = "content-type" content = "text / html; charset = utf-8" /> <meta http-equiv = "Content-Style-Type" content = "text / css" /> </ head> <body> <div> <textarea id = "messageText" cols = "45" rows = "15"> </ textarea> </ div> <div> Кількість символів: <span id = "symbolsCounter "> </ span> </ div> <script type =" text / javascript "src =" jquery-1.3.1.min.js "> </ script> <script type =" text / javascript "> $ (function () {var ta = $ ( "# messageText"); var counter = $ ( "# symbolsCounter"); counter.html (ta.val (). length); if ($ .browser.mozilla && $ .browser. version.substr (0,3) == "1.9") {ta.bind ( "input", function () {updateCounter ();});} else {ta.bind ( "keyup", function () {updateCounter ();});} function updateCounter () {counter.html (ta.val (). length); var split = Ta.val (). Split ( "\ n"); if (split.length> 15) {ta.attr ( "rows", split.length); }}}); </ Script> </ body> </ html>На сторінці розміщені текстова область (рядок 16) та блок для виведення кількості символів (рядок 18).
Найбільший інтерес представляє JS код. Подивимося, як він працює.
Перш за все, перевіряємо який браузер використовується. Якщо це FireFox останніх версій, призначаємо для текстової області обробник події input (рядки 26-29), якщо ні - будемо обробляти keyup (рядки 31-34).
При виникненні цих подій викликається функція updateCounter, в якій ми визначаємо і показуємо кількість символів у поле для тексту (рядок 38).
Решта код в функції updateCounter іспольлзуется для зміни висоти текстової області, якщо введений текст перевищує її розмір. Алгоритм тут простий.
Розбиваємо текст за допомогою функції split на лексеми (рядок 39), а як роздільник використовуємо символ кінця рядка. В результаті отримуємо масив з кількістю елементів рівною кількості рядків. Якщо ця кількість перевищить дефолтний значення (15) - змінюємо розмір текстової області (рядки 40-42).
Як бачите, в нових стандартах є цікаві і, найголовніше, корисні нововведення.
Шкода, що розробники браузерів від них сильно відстають.
цікаво почитати
Реклама в блогах від студії SMOpro -
найбільш ефективний спосіб просування вашого ресурсу.
Lt;?
Quot; encoding = "UTF-8"?