Быстрый поиск
Введите фрагмент названия статьи для поиска
Получение позиции курсора в текстовом поле INPUT
11.07.2022 | Категория: Web-мастеру и не только | Автор: ManHunter
Нашел в этих ваших интернетах забавный визуальный эффект для поля ввода логина и пароля. Но, на мой взгляд, он работает не совсем правильно, так как глаза должны следить за позицией курсора в поле ввода, а не за количеством введенных символов.Пришлось рисовать универсальную кроссбраузерную функцию для получения позиции курсора в поле INPUT, дополнив список уже имеющихся функций похожего назначения. Вот что у меня получилось:
Code (JavaScript) : Убрать нумерацию
- <script type="text/javascript">
- function getpos(id) {
- var el=document.getElementById(id);
- var pos, sel;
- // Internet Explorer
- if (document.selection) {
- el.focus();
- if (sel=document.selection.createRange()) {
- sel.moveStart('character', -el.value.length);
- pos=sel.text.length;
- }
- // ... something wrong ...
- else {
- pos=0;
- }
- }
- // Mozilla, Chrome
- else if (el.selectionStart || el.selectionStart=='0') {
- if (el.selectionDirection) {
- if (el.selectionDirection=='backward') {
- pos=el.selectionStart;
- }
- else {
- pos=el.selectionEnd;
- }
- }
- else {
- // Opera 9
- pos=el.selectionEnd;
- }
- }
- // ... something wrong ...
- else {
- pos=0;
- }
- return parseInt(pos);
- }
- </script>
Читать статью целиком »
Просмотров: 432 | Комментариев: 1
Обнаружение headless-браузеров
10.02.2022 | Категория: Web-мастеру и не только | Автор: ManHunter
Обнаружение headless-браузеров
Ранее в одной из статей я рассказал, как при помощи "безголовых" серверных браузеров можно собирать информацию с сайтов. А сейчас в связи с тем, что гугл меня окончательно задолбал уведомлениями о якобы распространении вредоносного софта, я задумался о противодействии таким технологиям.
Читать статью целиком »
Просмотров: 1316 | Комментариев: 2
Проверка поддержки браузером WebP на JavaScript
06.12.2021 | Категория: Web-мастеру и не только | Автор: ManHunter
Практически все современные браузеры поддерживают формат изображений WebP, но нелишним будет озаботиться проверкой этой самой поддержки, чтобы можно было выбрать, какие изображения загружать на страницу, а пользователю не пришлось бы разглядывать пустые площади вместо картинок.Проверка основана на создании через протокол data:URL изображений, представляющих собой однопиксельные WebP-картинки в формате Lossy и Lossless. Если изображение удалось "загрузить" и его размеры корректные, то принимается, что браузер поддерживает этот формат. В случае возникновения ошибки при создании изображения поддержки этого формата в браузере нет.
Code (JavaScript) : Убрать нумерацию
- <script type="text/javascript">
- var webp = {
- lossy: {
- src: 'data:image/webp;base64,UklGRiIAAABXR'+
- 'UJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA',
- support: null
- },
- lossless: {
- src: 'data:image/webp;base64,UklGRhoAAABXRUJQVlA'+
- '4TA0AAAAvAAAAEAcQERGIiP4HAA==',
- support: null
- }
- };
- for (var i in webp) {
- webp[i].img=new Image();
- webp[i].img.id=i;
- webp[i].img.onload=function(event) {
- event=event || window.event;
- var el=event.target || event.srcElement;
- webp[el.id].support=(el.width>0 && el.height>0);
- };
- webp[i].img.onerror=function(event) {
- event=event || window.event;
- var el=event.target || event.srcElement;
- webp[el.id].support=false;
- };
- webp[i].img.src=webp[i].src;
- }
- </script>
Способ хороший, но с одной оговоркой. Поскольку тестовые изображения создаются асинхронно, то данные с их обработчиков onload или onerror будут доступны не сразу после выполнения кода, а с некоторой задержкой, пусть и незначительной.
Code (JavaScript) : Убрать нумерацию
- <script type="text/javascript">
- setTimeout(function() {
- alert('Lossy: '+webp.lossy.support+'\nLossless: '+webp.lossless.support);
- },1000);
- </script>
Просмотров: 1571 | Комментариев: 0
Кроссбраузерное получение и установка выделения в INPUT
10.10.2021 | Категория: Web-мастеру и не только | Автор: ManHunter
Шпаргалка для себя, чтобы не искать. Набор полезных функций для работы с полями ввода, такими как TEXTAREA и INPUT TYPE="TEXT". С помощью этих функций можно узнать, какой фрагмент текста выделен или же наоборот, выделить текст заданной длины с определенной позиции.Функция получения границ выделения в поле ввода. В качестве параметров передается элемент поля ввода, на выходе объект с значениями начальной и конечной позиции выделения.
Code (JavaScript) : Убрать нумерацию
- //---------------------------------------------------------
- // Получение границ выделения в поле ввода
- //---------------------------------------------------------
- function get_selected_input(el) {
- var pos={start:0, end:0};
- if (el.selectionStart) {
- // Mozilla + Opera + Chrome + Safari
- pos={
- start: el.selectionStart,
- end: el.selectionEnd
- };
- }
- else {
- // IE
- if (document.selection) {
- var sel=el.createTextRange();
- sel.moveToBookmark(document.selection.createRange().getBookmark());
- var before = el.createTextRange();
- before.collapse(true);
- before.setEndPoint('EndToStart', sel);
- pos={
- start: before.text.length,
- end: (before.text.length + sel.text.length)
- };
- }
- }
- return pos;
- }
Code (JavaScript) : Убрать нумерацию
- //---------------------------------------------------------
- // Установка границ выделения в поле ввода
- //---------------------------------------------------------
- function set_selected_input(el,start,end) {
- // Корректировка границ
- if (start>end) {
- var tmp=start;
- start=end;
- end=tmp;
- }
- if (el.selectionStart) {
- // Mozilla + Opera + Chrome + Safari
- el.setSelectionRange(start,end);
- }
- else {
- // IE
- var sel=el.createTextRange();
- sel.collapse(true);
- sel.moveStart('character',start);
- sel.moveEnd('character', (end-start));
- sel.select();
- }
- return true;
- }
Читать статью целиком »
Просмотров: 599 | Комментариев: 0
Перемешивание массива на JavaScript
20.11.2020 | Категория: Web-мастеру и не только | Автор: ManHunter
Перемешивание массива на JavaScript
Несмотря на особенности сортировки массивов в JavaScript, которые нашли отражение даже в интернет-мемах, без этой самой сортировки не обойтись. Случайное перемешивание массива - тоже своеобразный вариант сортировки. Для его реализации в этих ваших интернетах обычно рекомендуют воспользоваться следующим или каким-то подобным кодом:
Code (JavaScript) : Убрать нумерацию
- var test_array=[1,2,3,4,5,6,7,8,9,10];
- test_array.sort(
- function() { return (Math.random()-0.5); }
- );
- // test_array -> перемешанный массив
Читать статью целиком »
Просмотров: 1106 | Комментариев: 1
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 32,565 раз
Поблагодарили 32,565 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 410 |
 |
 |