Blog. Just Blog

Получение позиции курсора в текстовом поле INPUT

Версия для печати Добавить в Избранное Отправить на E-Mail 11.07.2022 | Категория: Web-мастеру и не только | Автор: ManHunter
Нашел в этих ваших интернетах забавный визуальный эффект для поля ввода логина и пароля. Но, на мой взгляд, он работает не совсем правильно, так как глаза должны следить за позицией курсора в поле ввода, а не за количеством введенных символов.

Пришлось рисовать универсальную кроссбраузерную функцию для получения позиции курсора в поле INPUT, дополнив список уже имеющихся функций похожего назначения. Вот что у меня получилось:
Code (JavaScript) : Убрать нумерацию
  1. <script type="text/javascript">
  2. function getpos(id) {
  3.     var el=document.getElementById(id);
  4.     var pos, sel;
  5.  
  6.     // Internet Explorer
  7.     if (document.selection) {
  8.         el.focus();
  9.         if (sel=document.selection.createRange()) {
  10.             sel.moveStart('character', -el.value.length);
  11.             pos=sel.text.length;
  12.         }
  13.         // ... something wrong ...
  14.         else {
  15.             pos=0;
  16.         }
  17.     }
  18.     // Mozilla, Chrome
  19.     else if (el.selectionStart || el.selectionStart=='0') {
  20.         if (el.selectionDirection) {
  21.             if (el.selectionDirection=='backward') {
  22.                 pos=el.selectionStart;
  23.             }
  24.             else {
  25.                 pos=el.selectionEnd;
  26.             }
  27.         }
  28.         else {
  29.             // Opera 9
  30.             pos=el.selectionEnd;
  31.         }
  32.     }
  33.     // ... something wrong ...
  34.     else {
  35.         pos=0;
  36.     }
  37.     return parseInt(pos);
  38. }
  39. </script>
Единственный параметр - id поля ввода, на выходе числовое значение позиции курсора. Вызов функции лучше биндить на все возможные обработчики, так или иначе связанные с изменением содержимого поля ввода или с его (де)активацией. В некоторых случаях в старых браузерах может наблюдаться проблема с определением позиции курсора при выделении фрагмента текста, а также при автоповторе нажатия клавиш. В современных браузерах все работает нормально.

Демонстрационную страничку с отслеживанием позиции курсора в поле ввода можно посмотреть здесь, а доработанную страницу логина здесь.

Поделиться ссылкой ВКонтакте
Просмотров: 691 | Комментариев: 1

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
dElk (12.07.2022 в 11:54):

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (27), AJAX (5), Assembler (348), COM (39), CSS (39), Exif (15), FASM (8), Firefox (7), HDD (17), Hello Teddy (9), HTML (48), iconBIT (4), JavaScript (68), MySQL (13), Nikon (19), PDF (9), PHP (119), Samsung (6), SEO (12), Sublime Text (9), TintonLife (4), UGREEN (4), Windows 7 (66), аккумуляторы (22), аксессуары (12), анализаторы файлов (8), архиваторы (5), аттракционы (7), безопасность (55), браузеры (16), бытовая техника (19), варенье (18), ВВЦ (9), ВДНХ (14), видео (20), Воробьевы горы (9), вторые блюда (120), выпечка (26), выставки (116), генератор ПСЧ (10), графика (118), десерты (31), Египет (8), заготовки на зиму (45), закуска (21), закуска к пиву (24), зарядные устройства (23), защита (15), зоопарки (10), игры (36), иконки (22), интерфейс (26), исследование защиты (306), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (27), ледяные скульптуры (6), мои программы (68), мониторы (6), музеи (72), мультимедиа (70), мясо (59), напитки (14), ноутбуки (8), обфускация (7), окна (69), оформление сайта (47), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (127), полезные функции (39), прохождения (4), процессы (25), птица (20), путешествия (25), распаковка (22), реверсинг (51), рыба (34), салаты (18), сброс триала (4), сеть (36), система (177), Сокольники (8), соусы (14), супы (14), телефоны (8), Тунис (6), умный дом (12), файлы справки (6), фаст-фуд (18), фестиваль цветов (5), флешки (5), фото (23), хеши (16), числа (8), юмор (12), яйца (17), Яндекс (10)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 34,316 раз
<< 2024 - АПРЕЛЬ >>
Пн Вт Ср Чт Пт Сб Вс
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          
День работника ломоперерабатывающей отрасли России
День российской полиграфии
День юридической службы Министерства внутренних дел России
День принятия Крыма, Тамани и Кубани в состав Российской империи
День подснежника
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 380
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.09 сек. / MySQL: 2 (0.0039 сек.) / Память: 4.5 Mb
Наверх