Blog. Just Blog

Быстрый поиск

Введите фрагмент названия статьи для поиска

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

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

Пришлось рисовать универсальную кроссбраузерную функцию для получения позиции курсора в поле INPUT, дополнив список уже имеющихся функций похожего назначения. Вот что у меня получилось:
  1. <script type="text/javascript">
  2. function getpos(id) {
  3.     var el=document.getElementById(id);
  4.     var possel;
  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 поля ввода, на выходе числовое значение позиции курсора. Вызов функции лучше биндить на все возможные обработчики, так или иначе связанные с изменением содержимого поля ввода или с его (де)активацией. В некоторых случаях в старых браузерах может наблюдаться проблема с определением позиции курсора при выделении фрагмента текста, а также при автоповторе нажатия клавиш. В современных браузерах все работает нормально.

Читать статью целиком »
Просмотров: 254 | Комментариев: 1

Обнаружение headless-браузеров

10.02.2022 | Категория: Web-мастеру и не только | Автор: ManHunter

Обнаружение headless-браузеров

Ранее в одной из статей я рассказал, как при помощи "безголовых" серверных браузеров можно собирать информацию с сайтов. А сейчас в связи с тем, что гугл меня окончательно задолбал уведомлениями о якобы распространении вредоносного софта, я задумался о противодействии таким технологиям.

Читать статью целиком »
Просмотров: 887 | Комментариев: 2

Проверка поддержки браузером WebP на JavaScript

06.12.2021 | Категория: Web-мастеру и не только | Автор: ManHunter
Практически все современные браузеры поддерживают формат изображений WebP, но нелишним будет озаботиться проверкой этой самой поддержки, чтобы можно было выбрать, какие изображения загружать на страницу, а пользователю не пришлось бы разглядывать пустые площади вместо картинок.

Проверка основана на создании через протокол data:URL изображений, представляющих собой однопиксельные WebP-картинки в формате Lossy и Lossless. Если изображение удалось "загрузить" и его размеры корректные, то принимается, что браузер поддерживает этот формат. В случае возникновения ошибки при создании изображения поддержки этого формата в браузере нет.
  1. <script type="text/javascript">
  2. var webp = {
  3.     lossy: {
  4.         src'data:image/webp;base64,UklGRiIAAABXR'+
  5.              'UJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA',
  6.         supportnull
  7.     },
  8.     lossless: {
  9.         src'data:image/webp;base64,UklGRhoAAABXRUJQVlA'+
  10.              '4TA0AAAAvAAAAEAcQERGIiP4HAA==',
  11.         supportnull
  12.     }
  13. };
  14. for (var i in webp) {
  15.     webp[i].img=new Image();
  16.     webp[i].img.id=i;
  17.     webp[i].img.onload=function(event) {
  18.         event=event || window.event;
  19.         var el=event.target || event.srcElement;
  20.         webp[el.id].support=(el.width>&& el.height>0);
  21.     };
  22.     webp[i].img.onerror=function(event) {
  23.         event=event || window.event;
  24.         var el=event.target || event.srcElement;
  25.         webp[el.id].support=false;
  26.     };
  27.     webp[i].img.src=webp[i].src;
  28. }
  29. </script>
Результаты будут доступны в полях webp.lossy.support и webp.lossless.support. Если там null, то проверка не выполнялась или еще не завершена.

Способ хороший, но с одной оговоркой. Поскольку тестовые изображения создаются асинхронно, то данные с их обработчиков onload или onerror будут доступны не сразу после выполнения кода, а с некоторой задержкой, пусть и незначительной.
  1. <script type="text/javascript">
  2. setTimeout(function() {
  3.     alert('Lossy: '+webp.lossy.support+'\nLossless: '+webp.lossless.support);
  4. },1000);
  5. </script>
Например, этот код выведет состояние поддержки формата WebP с задержкой в 1 секунду, когда результаты уже будут известны.

Просмотров: 976 | Комментариев: 0

Кроссбраузерное получение и установка выделения в INPUT

10.10.2021 | Категория: Web-мастеру и не только | Автор: ManHunter
Шпаргалка для себя, чтобы не искать. Набор полезных функций для работы с полями ввода, такими как TEXTAREA и INPUT TYPE="TEXT". С помощью этих функций можно узнать, какой фрагмент текста выделен или же наоборот, выделить текст заданной длины с определенной позиции.

Функция получения границ выделения в поле ввода. В качестве параметров передается элемент поля ввода, на выходе объект с значениями начальной и конечной позиции выделения.
  1. //---------------------------------------------------------
  2. // Получение границ выделения в поле ввода
  3. //---------------------------------------------------------
  4. function get_selected_input(el) {
  5.     var pos={start:0end:0};
  6.  
  7.     if (el.selectionStart) {
  8.         // Mozilla + Opera + Chrome + Safari
  9.         pos={
  10.             startel.selectionStart,
  11.             endel.selectionEnd
  12.         };
  13.     }
  14.     else {
  15.         // IE
  16.         if (document.selection) {
  17.             var sel=el.createTextRange();
  18.             sel.moveToBookmark(document.selection.createRange().getBookmark());
  19.  
  20.             var before el.createTextRange();
  21.             before.collapse(true);
  22.             before.setEndPoint('EndToStart'sel);
  23.  
  24.             pos={
  25.                 startbefore.text.length,
  26.                 end: (before.text.length sel.text.length)
  27.             };
  28.         }
  29.     }
  30.     return pos;
  31. }
Функция установки выделения в поле ввода. В качестве параметров передается элемент поля ввода, позиция начала и конца выделения.
  1. //---------------------------------------------------------
  2. // Установка границ выделения в поле ввода
  3. //---------------------------------------------------------
  4. function set_selected_input(el,start,end) {
  5.     // Корректировка границ
  6.     if (start>end) {
  7.         var tmp=start;
  8.         start=end;
  9.         end=tmp;
  10.     }
  11.  
  12.     if (el.selectionStart) {
  13.         // Mozilla + Opera + Chrome + Safari
  14.         el.setSelectionRange(start,end);
  15.     }
  16.     else {
  17.         // IE
  18.         var sel=el.createTextRange();
  19.         sel.collapse(true);
  20.         sel.moveStart('character',start);
  21.         sel.moveEnd('character', (end-start));
  22.         sel.select();
  23.     }
  24.     return true;
  25. }
Кроме этих сюда же можно отнести еще несколько функций для работы с полем ввода и выделенным текстом. Чуток не в тему, но очень близко, тем более, что чаще всего они используются в связке.

Читать статью целиком »
Просмотров: 445 | Комментариев: 0

Перемешивание массива на JavaScript

20.11.2020 | Категория: Web-мастеру и не только | Автор: ManHunter

Перемешивание массива на JavaScript

Несмотря на особенности сортировки массивов в JavaScript, которые нашли отражение даже в интернет-мемах, без этой самой сортировки не обойтись. Случайное перемешивание массива - тоже своеобразный вариант сортировки. Для его реализации в этих ваших интернетах обычно рекомендуют воспользоваться следующим или каким-то подобным кодом:
  1. var test_array=[1,2,3,4,5,6,7,8,9,10];
  2.  
  3. test_array.sort(
  4.     function() { return (Math.random()-0.5); }
  5. );
  6. // test_array -> перемешанный массив
На первый взгляд функция рабочая, но при тестировании, особенно на больших массивах, результат оставляет желать лучшего. В зависимости от поведения рандомайзера, в массиве могут оставаться целые последовательности неперемешанных элементов.

Читать статью целиком »
Просмотров: 798 | Комментариев: 1

prev 01 02 03 04 05 06 07 08 09 ... 13
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2022
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.12 сек. / MySQL: 3 (0.0529 сек.) / Память: 5 Mb
Наверх