Javascript selections (работа с выделениями)


Содержание

w3.org.ua

уроки front-end и back-end

Рубрики

Работа с ползунком range в JS

В HTML5 вводится новые значения атрибута type, в частности — type=»range», который представляет из себя ползунок. Давайте разберем как работать с таким элементом.

Пример использования в коде html:

И результат применения ползунка в коде:

Для работы с ползунком введены следующие атрибуты:

  • max — максимальное значение элемента (соответствует крайнее правое положение ползунка). Число.
  • min — минимальное значение элемента (соответствует крайнее левое положение ползунка). Число.
  • step — шаг ползунка. Число.

Пример применения атрибутов, представлен ниже.

Кроме того, как и с любым элементов HTML к input type=»range» можно применить оформление CSS.

Как работать с ползунком в JS

Поскольку ползунок — это элемент Input, то для считывания его значения можно применять свойство value. В следующем примере мы будем считывать значение ползунка и выводить его в абзац.

Обратите внимание на новое событие oninput. Событие OnInput — срабатываем при любом изменении в элементе формы, например при вводе нового символа, или при перемещении ползунка на 1px. В отличие от события OnChange — которое срабатываем только при потере фокуса элементом, oninput срабатываем при любом изменении в элементе. Данное событие добавляет ползунку интерактивности.

Событие onchange также удобно использовать вместе с элементом select.

Практическое задание

Задание 1. Замените событие OnInput в представленном примере на событие onchange. Изучите как изменилось поведение элементов. Когда происходит обновление значения в абзаце?

Задание 2. Задайте ползунку минимальное значение 50, а максимальное 150. Изучите какое минимальное и максимальное значение выводиться в абзаце?

Задание 3. Задайте шаг ползунка равным 10. Как происходит изменение значений в абзаце?

Задание 4. Задайте шаг изменения значений равным 7. Как измениться максимальное и минимальное значение?

Продолжаем работать с ползунком range

Внимание! Значения считанные из свойства value являются строкой. Не забывайте их переводить в число с помощью функции parseInt(ваша строка).

Javascript selections (работа с выделениями)

Небольшой список свойств и методов объекта выделения в некотором роде может ввести в заблуждение. Элементы, названые в этом списке,- это средства объекта selection, представленного в IE4+. В NN6 также используется объект selection, который не является частью W3C DОМ, поэтому в первых модификациях этого броузера не было предусмотрено создание подобного вида объектов. Далее рассматриваются основные способы управления объектом selection в NN6 независимо от того, когда он был впервые реализован. Но мы не будем детально рассматривать все свойства и методы этого объекта,

В броузере IЕ4+ объект selection представляет собой свойство объе кта docu ment, которое обеспечивает доступ сценария к любому тексту документа или средствам управления текстом, используемым сценарием или посетителями. Объект selection, состоящий из одного или более символов, всегда выделяется на странице; более того, только один объект selection может быть активным в текущее врсмя. Когда на странице посетителю дается указание выделить текст для выполнения определенного действия с ним, можно (и нужно) воспользоваться преимуществами, предоставляемыми объектом selection. Наиболее удобный случай применения объекта selection — с точки зрения обработки — это события onMouseUp. Это событие срабатывает после каждого отпускания кнопки мыши, при этом сценарий может анализировать объект document.selection на включение в него выделяемого текста (с помощью свойства type), С помощью метода createRange() можно преобразовать объект selection в объект TextRange. Затем для получения доступа к только что выделенному тексту области нужно воспользоваться свойством text. Такая последовательность действий может показаться достаточно сложной перед следующим шагом, однако объект selection (в броузере IE) не предоставляет возможности напрямую считывать или изменять выделенный текст. Если вы собираетесь выполнить действие с выделением, то, возможно, у вас не будет возможности сделать это сразу, щелкнув на кнопке или ссылке. В некоторых версиях броузеров и операционных систем щелчок на одном из элементов страницы автоматически приводит к отмене выделения текущего элемента или текста.

В броузере Navigator 4 с помощью метода document.getSelection() можно просматривать выделенный текст тела страницы, однако по сути, для этого броузера объекта selection не существует. Только в броузере NN6 сделана попытка исправить эту ситуацию. Метод document.getSelection() позволяет использовать броузер NN6 для косвенного получения копии выделения, подобной представляемой в IЕ (как описано выше): сначала создается область для выделения, а затем в эту область помещается необходимый текст.
Для отображения результатов текущего выделения, представленного объектом Selection, пользуйтесь методом window.getSelection() (как только он станет доступным в броузере NN6), Следует отметить, что отличие в выделениях броузеров IE и NN заключается в том, что объект selection в NN6 представляет текст только тела страницы, а не выделение внутри текстовых элементов управления. В броузере NN6 объект selection имеет представлен в дереве узла документа, при этом происходит определение начальной и конечной точек выделения. Когда посетитель медленно перемещает указатель мыши вдоль текста, узел, в котором начинается выделение, получаст статус анкерного, а узел, содержащий конечную точку выделения,- активного. Для выделения, проводимого двойным или тройным щелчком, направление между анкерным и активным узлами задается принимаемой по умолчанию системой письма (например, слева направо в русском языке). В большинстве случаев в броузере NN6 объект selection представляется так же, как и объект Range в модели W3C DOM, содержащий методы сжатия и расширения выделения. Однако в отличие от области, текст, сжимаемый с помощью объекта selection, выделяется на странице. Если ваши сценарии должны управлять узлами внутри выделения, то используйте метод getRangeAt() объекта selection, который возвращает объект Range, граничные точки которого совпадают с граничными точками выделения.

Объектно-ориентированная модель
NN 6 window.getSelection()
IE document.selection

Свойство type возвращает элемент Техt но только во время существования выделения на странице. В противном случае свойство возвращает значение none. Сценарий использует эту информацию дня определения существования выделения на странице:

if (document.selection.type == «Text») <
// процедура выделения
>

Компания Microsoft в своей документации обращает внимание на то, что это свойство иногда возвращает значение Control, однако рассмотрение этого связанного с режимом редактирования значения выходит за рамки данного справочника.

type NN n/a IE 4 DOM n/a
Только чтение
Пример:

if (document.selection.type == «Text»)

Возвращаемое значение:
1из двух постоянных значений (как строка): none | Text.
Значение по умолчанию: none

Удаляет содержание текущего выбора в документе. Для посетителя метод clear() выполняет такое же действие, как присвоение свойству TextRange.text пустой строки. Отличие между этими вышеупомянутыми способами заключается в том, что метод clear() можно использовать, не создавая текстовую область для выделения. После удаления выделения свойством selection.type возвращается значение None

Например, обработчик события в следующем тэге удаляет любой выбранный текст элемента P через две секунды после выбора:

clear( ) NN n/a IE 4 DOM n/a
Возвращаемое значение
None.
Параметры
None.

Чтобы создать текстовую область для пользовательского выделения в броузере IE, следует применять метод createRange() объекта selection, Я точно не знаю, почему метод для объекта selection называется createRange(), в то время как текстовые области для других действительных объектов создаются с помощью метода createTextRange(). Результатом работы обоих методов является окончательно обработанный объект TextRange.

После следующей инструкции:

var myRange = document.selection.createRange( )

сценарий сможет воздействовать на содержание выбранного текста.

Javascript selections (работа с выделениями)

Всем привет! Сегодня мы с вами рассмотрим возможности объекта selection. Данный объект возвращает информацию о выделенной части текста. Итак, поехали!

Для начало давайте выделим часть контента на сайте и попробуем выполнить в консоли браузера следующую команду.

В результате нам вернется объект selection со множеством параметров с помощью которых мы сможем получить наш выделенный текст.

Для более удобной читабельности все это дело можно облагородить используя метод getRangeAt().

Здесь в объекте selection мы оставили только основные параметры тем самым упрощая работу с данным объектом.

Теперь пойдем по порядку и рассмотрим самые основные свойства(параметры) объекта selection.

Свойство startContainer возвращает весь текст элемента в котором мы осуществили его выделение.

Причем тут стоит две особенности. Во первых данный параметр возвращает не сам выделенный текст, а весь текст элемента в котором мы осуществляем выделение. Во вторых если мы выделим текст двух разных элементов данное свойство вернет текст только первого из них.

Для того чтобы получить все элементы в которых мы осуществляем выделение текста можно воспользоваться свойством commonAncestorContainer.

В результате нам вернется dom структура элементов, текст которых был выделен.

Для того чтобы их все перебрать достаточно воспользоваться свойством

На выходе будет получен массив с элементами текст которых был выделен. Чтобы получить текст который мы выделили необходимо воспользоваться еще двумя параметрами startOffset и endOffset. Данные свойства возвращает начальную и конечную позицию строки элемента. Именно эти два параметра и определяют область выделения.

С помощью данного кода мы и получаем часть текста которую выделили. Как видите вначале получаем текст всего элемента, начальную и конечную позицию выделения и помещаем все это дело в переменные. Заметьте что при использовании свойства startContainer мы в конце обращаемся к ключу data. Все дело в том что параметр startContainer изначально возвращает объект в виде строки текста. И для получения самой строки необходимо обратится к ключу data.

В конце при выводе мы используем стандартную функцию substring() в которую передаем начальную и конечную позицию выделения. Отмечу что данный код работает при условии когда выделен текст в пределах одного элемента(тега) страницы.

Для того чтобы получить и соединить текст выделенный в разных элементах необходимо еще немного повозится. Ну да ладно. Оставляю данную задачу вам в качестве домашнего задания для закрепления навыков).

А на этом у меня на сегодня все. Не забывайте оставлять комментарии и подписывайтесь в мою группу

Обработчик выделения текста .select()


.select() — устанавливает обработчик выделения текста внутри элемента или запускает это событие.

Метод имеет два варианта использования.

  • handler — функция, которая будет установлена в качестве обработчика.
  • eventData — объект содержащий данные, для передачи в обработчик. Должны быть представлены в формате ;
  • handler — функция, которая будет установлена в качестве обработчика.

В первом варианте использования, метод является аналогом .on(«select», handler) , а в третьем случае аналогом .trigger( «select» ) .

Пример

See the Pen oooWaa by Aleksei (@AmateR) on CodePen.dark

В этом примере при клике по серому блоку, в поле будет выделен текст и выведется соответствующее сообщение. При выделении текста в поле так же сработает событие и выведется сообщение о том, что сработало событие выделения.

Дополнительно

Событие select() является лишь сокращением для .on(«select», handler) , поэтому убрать установленный обработчик можно с помощью .off( «select» )

Selection

На этой странице

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Свойства

Методы

Notes

String representation of a selection

Calling the Selection.toString() method returns the text contained in the selection, e.g.:

Note that using a selection object as the argument to window.alert will call the object’s toString method.

Multiple ranges in a selection

A selection object represents the ranges that the user has selected. Typically, it holds only one range, accessed as follows:

  • selObj is a Selection object
  • range is a Range object

Selection and input focus

Selection and input focus (indicated by Document.activeElement ) have a complex relation, that depends on the browser. In cross-browser compatible code it’s better to handle them separately.

Safari and Chrome (unlike Firefox) historically focus the element containing selection when modifying the selection programmatically, but this might change in the future (see W3C bug 14383 and Баг WebKit 38696).

Выделение текстового диапазона с использованием JavaScript

Я хотел бы выделить (применить css to) определенный диапазон текста, обозначенный его начальной и конечной позицией. Это более сложно, чем кажется, поскольку в тексте могут быть другие теги, которые нужно игнорировать.

highlight(2, 6) необходимо выделить «cdef «без удаления тега.

Я уже пробовал использовать объект TextRange, но безуспешно.

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

И код установки выбора:

Вы можете посмотреть, как работает эта мощная утилита JavaScript, которая поддерживает выбор по нескольким элементам DOM:

МАША (сокращение от Mark and Share) позволяет вам отмечать интересные части содержимого веб-страницы и делиться ею

Работает даже на Mobile Safari и IE!

Следующее решение не работает для IE, для этого вам нужно применить объекты TextRange и т.д. Поскольку для этого используется выбор, он не должен нарушать HTML в обычных случаях, например:

Обратите внимание, как он переносит первый символ за пределы диапазона в em , а затем остальные в пределах span в новый. Если бы он просто открыл его на символе 3 и заканчивался символом 6, это дало бы недопустимую разметку, например:

edit Похоже, что у моего FF4 были проблемы с

но в то же время он работает без него, поэтому я просто изменил его на

изменить по мере того как Тим указал, изменение доступно только с FF4, поэтому я принял другой подход к выбору, который не нуждается в методе модификации, в надежде сделать его более совместимым с браузером (IE все еще нуждается в собственном решении).

Список SELECT javascript (select js) и его методы

Объект SELECT, в языке JavaScript, используется для создания раскрывающегося списка с единичным или множественным типом выбора опций.

Мы рассмотрим примеры скриптов для обращения к свойствам и методам SELECT и работу с обработчиком события SELECT onChange() .

Что бы получить значение value или text выбранного элемента необходимо использовать свойство SELECT selectedIndex которое возвращает число (не путайте его со значением value) обозначающее порядковый номер выбранного элемента, нумерация начинается с нуля.

Если ни один из элементов не выбран будет возвращено число -1 (минус один).

У объекта SELECT есть объект OPTION методы которого используются для получения значения текстовых меток text и значения value любого из элементов списка SELECT.
Учтите, что у объекта SELECT нет свойств select text и select value поэтому, к этим значениям необходимо обращаться через массив OPTION.
Обращение происходит так:

Что бы изменить значения text или value элемента списка к нему так же обращаемся через массив OPTIONS:

Теперь мы можем написать функцию, для получения значений выделенного элемента и их вывода в модальном окне alert():

Учитывайте, что при отправке данных формы на сервер отправляется значение value выбранного элемента.

Напишем функцию которая при загрузке страницы сделает текущим указанный элемент списка SELECT с помощью метода selected объекта options. После выполнения кода текущим станет элемент с value=7 .

Теперь рассмотрим обработчик события SELECT onChange() он срабатывает только если будет выбран другой элемент отличный от текущего.
Напишем функцию Size() которая покажет количество элементов списка используя свойство SELECT length (счёт ведётся с нуля), а затем очистит список SELECT удалив все его элементы. И поместим эту функцию в обработчик события onChange():

Рассмотрим некоторые из атрибутов SELECT которые указаны в стандарте the Option Element
Атрибут disabled делает неактивным список SELECT запрещая или разрешая выбор элементов.
Что бы запретить выбор select его свойство disabled — необходимо установить в положение true делается это так:

Что бы разрешить вновь выбор, если он был запрещён, устанавливаем select disabled в положение false:

Иногда бывает необходимо узнать в каком положении атрибут select disabled и доступен ли список для выбора.
Для этого:

если список не доступен для выбора будет возвращено значение атрибута true если доступен false

Весь пример работы с SELECT выглядит так:


Выделение текста

Приведу пример, как программно выделять текст, при клике на него (так сделано на этом сайте с вставками кода). Найти пример как выделять принудительно текст на странице, труда не составило. Но возникла проблема, текст выделялся целиком, не только при клике, но и при ручном выделении части текста. Меня, такое поведение не устраивало. Решить проблему оказалось не сложно. Привожу код с комментариями:

PS проверка на то что выделено вручную часть текста, не работает для браузеров, не поддерживающих createRange (в частности IE<9), да и бог с ним. Может это и можно решить, но такую задачу я для себя не ставил.

Javascript примеры

Как узнать ширину и высоту клиентской (рабочей) области окна браузера?

Как заменить выделенный текст в TEXTAREA на другой?

Как это ни «странно» :-), но реализация ветвится из-за разных методов работы с выделениями в IE и Mozilla/Gecko:

В Internet Explorer используем объект selection, который представляет текущее выделение и его метод createRange, создающий объект TextRange из текущего выделения. Полученный TextRange объект имеет свойство text (для чтения и записи), которое и дает нам выделенный текст. Т.е. прочитали TextRange.text, сделали изменения и записали назад.

См. реальное использование в примере ниже.

Ну, а здесь ситуация выглядит несколько по-другому: для достижения цели используем свойства selectionStart и selectionEnd самого объекта textarea, которые содержат начальную и конечную позицию выделения соответственно. А имея текст и зная в нем начало и конец для замены, мы можем легко заменить выделенный фрагмент на другой используя, например метод «substr()».

В качестве аргумента ф-ии передается объект textarea и имя вспомогательной функции, которая принимает в качестве аргумента выделенный текст и возвращает новый текст, который заменит выделенный текст. После замены текста курсор устанавливается в конец выделения.

Как переместить (установить) текстовый курсор в начало или конец поля ввода textarea или input?

Internet Explorer позволяет нам сделать это при помощи следующих методов :

createTextRange() — данный метод создает объект типа TextRange (текстовый диапазон) и позволяет манипулировать текстом. Пустой текстовый диапазон представляет собой курсор — точку ввода.

collapse() — данный метод объекта TextRange сужает текстовый диапазон до 0 (превращает его в курсор (в точку ввода)) и устанавливает точку ввода либо в начало диапазона (collapse(true) или просто collapse(), так как значение по умолчанию true) или в конец (collapse(false)).

select() — медод объекта TextRange нужный для визуального выделения текста включенного в диапазон. В случае пустого диапазона просто устанавливает текстовый курсор.

в качестве аргумента ф-ям передается объект элемента ввода, например: moveCaretToStart(document.formName.textareaName)

setSelectionRange(start, end) — данный метод создающий текстовое выделение в случае когда start и end совпадают установит курсор в нужную позицию

После замены выделенного текста выделение пропадает. Как сделать так чтобы выделение оставалось?

Для этого после замены текста выделяем текст заново, используя метод setSelectionRange(start,end).

Как получить позицию текстового курсора в textarea элементе (textarea — позиция курсора)?

Ф-ии в качестве аргумента передается объект textarea.

Н апример: getCaretPos(document.formName.textareaName);

Как получить количество строк в textarea элементе?

Обратите внимание на то, как ведется подсчет строк:

  • если текстовое поле пусто, то функция вернет 0 (хотя курсор и мигает в первой строке), ибо строк реально нет;
  • если вы нажали «Enter» и курсор переместился в новую строку, то это не значит что, появилась новая строка. Вот когда вы введете в этой строке что-то, то строка действительно появится, и будет учитываться при подсчете.

Пояснения: clientHeight возвращает высоту элемента textarea без учета всех отступов, границ, полос прокрутки;

boundingHeight возвращает размер в пикселах воображаемого пространства, занятого объектом TextRange (в нашем случае данный объект содержит весь текст и соответственно возвращает высоту занимаемую текстом в textarea элементе).

Запрет выделения текста

JavaScript проверка e-mail на валидность

Перед тем как реализовать JavaScript проверку e-mail адреса на валидность, следует рассмотреть из каких элементов он собственно состоит.

E-mail адрес состоит из двух частей разделенных символом «@»: «Имя пользователя» @ «доменное имя». Имя пользователя, мы ограничим символами латинского алфавита (a-z), цифрами (0-9), символом подчеркивания «_», дефисом «-» и точкой «.» Причем имя пользователя не может начинаться и заканчиваться точкой. Что касается доменного имени, то оно должно удовлетворять следующим критериям: в доменном имени могут присутствовать символы латинского алфавита, цифры и дефис «-«; домен не должен начинаться или заканчиваться дефисом; домен первого уровня (например, com, org, info, ru и т.д.) состоит только из символов латинского алфавита и ограничен длиной от 2 до 4 (или до 6 (домен museum)) символов.

Ниже приведена функция для проверки e-mail адреса с помощью регулярного выражения:

Ну, и при желании можно ввести ограничения на общую длину. Имя пользователя может быть длиной не более 64 символов, а доменное имя до 255 символов (RFC 2821), а вместо a-z0-9_ указать эквивалентый класс символов \w (что я не сделал в целях наглядности).

Введите email для проверки:

Javascript redirect

Javascript redirect, т.е. переадресация javascript делается следующим образом (вставлять в разделе HEAD документа HTML):

Для того чтобы сделать более универсальный редирект с задержкой пропишите в разделе HEAD документа HTML следующий код:

Пояснение. Для универсальности совмещаем два способа: Javascript редирект и redirect html. Для редиректа с задержкой используем функцию setTimeout, а для самого перенаправления используем метод replace, чтобы заменить текщий адрес на новый и тем самым в хистори не оставлять промежуточной страницы. На тот случай если Javascript отключен дублируем перенаправление тэгом META refresh:

Однако по возможности лучше использовать перенаправление с помощью серверного скрипта — PHP redirect или используя возможности самого вэб-сервера, так как meta refresh имеет недостатки, а Javascript у некоторых редких пользователей может быть отключен.

Как получить десятичное число в шестнадцатеричном представлении (конвертация десятичного числа в шестнадцатеричное)?

Как преобразовать значение цвета из rgb(n,n,n) в #HEX?

Например, rgb(255,255,255) или rgb(100%,100%,100%) в FFFFFF. Заодно функция расширяет сокращенную шеснадцатиричную запись цвета в полную, например, #FAE в FFAAEE. Возвращается шеснадцатиричное значение цвета без ведущего символа #.

RGB2HEX

Как получить отдельно значение красного (Red), зеленого (Green), синего (Blue) цветов из RGB значения цвета? splitRGB, HEX2RGB

Например, из цвета Lime (#00FF00, rgb(0,255,0) или rgb(0%,100%,0%)) получить массив из трех элементов (0,128,0), где нулевой элемент массива соответствует красному, первый зеленому, а второй синему цветам.

*Функция splitRGB() использует ф-ю getHexRGBColor(), описанную в вопросе «Как преобразовать значение цвета из rgb(n,n,n) в #HEX?».

Как получить #HEX значение цвета по его имени?

Генерация случайного числа (Javascript random, аналог PHP функции rand)

Чтобы получить в Javascript случайное число следует использовать метод объекта Math.random(), который возвращает псевдо-случайное число от 0 (включительно) до 1 (не включая 1, т.е. число всегда меньше 1).

Для генерации целого псевдо-случайного числа от 0 до n включительно, используется следующая формула:

Для генерации целого псевдо-случайного числа в диапазоне от m до n включительно, используется следующая формула:

где m нижняя граница диапазона, а n верхняя граница диапазона.

Ниже приведена функция для генерации случайных чисел в диапазоне от m до n:

Как перемешать массив случайным образом?

Если нужно перемешать эелементы массива в случайном порядке, то . это придется сделать самим, в Javascript нет функции shuffle такой как в PHP:

Как перенести текст на другую строку в окне alert?

Очень просто, используйте символ переноса строки \n .

Внимание! В html файле текст внутри alert должен идти одной строкой без переносов, так как иначе в некоторых браузерах может возникнуть ошибка «Error: unterminated string literal».

Как удалить элемент массива? / Как добавить элемент в середину массива?


Оператор delete поддерживается начиная с Nav2+, NES3+, IE 4+, Opera3+

Замечание: свойство length оператором delete не изменяется, но это для ассоциативных массивов значения не имеет ибо length всегда для них равен 0. Однако для числовых массивов это крайне важно и помните об этом! Почему не меняется свойство length? Потому что Array.length — это не длина массива, а максимальный индекс массива который только был у массива, хотя чаще всего length равно именно длине массива. Кстати свойству length можно присваивать значения, тем самым урезая массив или расширяя массив новыми элементами со значением «undefined».

Для удаления элементов из числового массива или вставки элементов с изменением индексов и свойства length используйте метод splice объекта Array.

Синтаксис: array.splice(start, delete, arg3. argN)

Параметры:

start — число, задающее индекс, с которого должно начаться удаление элементов и/или вставка новых элементов
delete — необязательный параметр указывающий количество элементов которое следует удалить начиная с индекса start
arg3. argN — необязательные параметры которые будут вставлены в массив в качестве новых элементов начиная с индекса start

Описание:

Если «delete» является числом больше нуля, то элементы начиная с индекса «start» до элемента с индексом start+delete будут удалены из массива. Если же delete равен нулю, то удаляться ничего не будет. Если delete не указан, то все элементы с индекса «start» до конца массива будут удалены. Если за аргуметом delete указаны какие-то параметры, то они будут добавлены к массиву как его элементы начиная с индекса «start». Существующие элементы перенумеровываются в сторону старших индексов предоставляя место новым элементам.

Метод splice объекта Array поддерживается начиная с Nav4+, IE5.5+, Opera5+

Замечание: помните, что индекс первого элемента в массивах начинается с 0.

Примеры:

Как узнать какие свойства есть у объекта (оператор for in)?

Как узнать все свойства объекта? В этом поможет оператор for in

Суть оператора в следующем: при каждой итерации цикла, переменной «variable» присваивается имя очередного свойства объекта «object».

Рассмотрим функцию, которая перебирает свойства объекта и возвращает их вместе со значениями в виде строки:

Как проверить, загрузилась ли картинка в браузере (включена ли загрузка картинок)?

Для этого можно воспользоваться событием «onLoad» картинки, если картинка загружена, то выполнится упомянутое событие, если нет то нет.

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

А теперь ложка дегтя: Opera выполняет событие onLoad() даже если картинка не отображается, но находится в кэше, т.е. была ранее загружена и сохранена в кэше. Надеюсь это временное поведение :-(

Javascript trim или как убрать/вырезать пробелы по краям строки?

При работе с формами имеет смысл убирать пробельные символы такие, как tab, \r, \n, form feed, vertical tab из строк в полях, заполняемых пользователем. Функция Javascript trim, описанная ниже поможет в этом:

Если вы используете библиотеку JQuery, то в ней функция trim уже определена и вызывается так: $.trim().

Как перевести код символа в символ (получить символ по его коду; аналог chr() в Javascript)?

Получить символ по его коду можно с помощью метода fromCharCode объекта String.
Например: var c = String.fromCharCode(84);

Как обраться к элементу формы в имени которого есть квадратные скобки «[]»?

В JavaScript свойства объекта можно рассматривать как массив элементов. Таким образом, для формы существует массив document.имя_формы[], который содержит все элементы формы, и можно обратиться к «элементу[]» следующим образом:

Как отметить/пометить/выделить все чекбоксы (checkbox) в группе?

Первым делом всем элементам chechbox в группе даем одинаковое имя (атрибут name тэга input). Если вы передаете данные скрипту на PHP, то удобно дать название вида name=»cboxdata[]» со скобками вконце названия, для того чтобы в PHP скрипте данные были доступны через массив cboxdata. Теперь чтобы отметить или снять все отметки с чекбоксов нужно вызвать функцию checkAll(oForm, cbName, checked), где oForm — объект формы, cbName — строка с иенем элементов checkbox в группе, а checked это либо true, либо false, в зависимости что нужно, отметить или снять отметки.

Как выбрать все значения в ячейках таблицы (как обойти таблицу по ячейкам)?

Задача: имеется таблица с атрибутом и требуется обойти все ряды, а в них все ячеки и выветси их содержимое.

createRange( ) NN n/a IE 4 DOM n/a
1 2
3 4

Обойти таблицу getElementById — Возвращает элемент с заданным идентификатором.
getElementsByTagName — Возвращает коллекцию всех элементов, имеющих данный тег.

Как убрать (удалить) страницу (адрес) из истории просмотра (browser history), чтобы она стала недоступной через кнопки Back/Forward (Назад/Вперед)?

Например, нужно направить пользователя со страницы 1.html на страницу 2.html, а страницу 1.html убрать из истории просмотра. Для этого переход со страницы 1.html на страницу 2.html нужно выполнить так:

Как узнать/изменить значение атрибута class элемента (свойство className)?

Javascript может получить доступ к атрибуту class элемента через свойство «className». Однако, следует иметь ввиду, что элементу можно задать не один класс, а сразу несколько, отделённых друг от друга пробелом.

Пример: . , показывает, что элементу span назначено два класса (bigText и greenText) .

Ввиду вышесказанного, нельзя использовать простое присваивание, типа: elem. , чтобы не затереть другие возможные значения, и следует новое значение, добавить к уже имеющимся через пробел (хотя если вы уверены, что свойство className пусто, то конечно же можно использовать и простое присваивание).

Для проверки наличия класса и удаления используется регулярное выражение: /\bgreenText\b/ , где \b — это специальная конструкция (метасимвол) обозначающая границу слова, т.е регулярное выражение ищет строку greenText, которая является самомтоятельным словом, а не частью другого слова (под словом понимается строка без разделителей: пробелов, знаков пунктуации и т.п.). Использование метасимвола \b здесь в самый раз, но есть одно НО, не все браузеры его понимают (например, Opera 6 и ниже). Поэтому, если нужна поддержка таких «кривых» и старых браузеров, то следует заменить регулярное выражение «/\bимя класса\b/», на менее изящное «/(^| )имя класса($| )/».

*IE4+, Gecko, Opera7+ . понимают \b как положено.

Функциии Javascript и значения по умолчанию.

Как это не печально, но в Javascript отсутствует такое понятие как значение аргумента функции по умолчанию. Но на самом деле это не большая проблема, хоть и ничего приятного в этом нет. Рассмотрим пример:

Как подавить сообщения браузера об ошибках Javascript?

Для этого воспользуемся событием onerror объекта window.

или можно назначить в качестве обработчика этого события функцию, возвращающую true для подавления сообщения об ошибке

Во время возникновения ошибки вызывается обработчик события и ему передаются следующие параметры: текст сообщения, URL, номер строки с ошибкой. Для того чобы ими воспользоваться объявите их в качестве аргументов при описании функции обработчика: function myErrHandler(msg, url, lno)<. >.

Обратите внимание на то, что все что расположено в скрипте после кода вызвавшего ошибку, выполняться не будет!

Как узнать на сколько прокручен документ (scrollLeft, scrollTop)? Почему scrollLeft, scrollTop всегда равны нулю? Как прокрутить содержимое окна документа?

Узнать на сколько прокручен объект вниз или влево или прокрутить его на определенную велечину можно с помощью свойств scrollTop и scrollLeft объекта.

Примечание: для старых браузеров Netscape (4-6), Opera 5 следует использовать свойства pageXOffset, pageYOffset

Но когда дело касается прокрутки всего документа, то нужно учитывать наличие в документе конструкции !DOCTYPE. Если !DOCTYPE переключает браузер в режим следования стандартам, то некоторые свойства объекта document.body становятся доступными лишь через объект document.documentElement, это относится и к свойствам scrollLeft, scrollTop.

Если браузер находится в режиме CSS1Compat (режим следования стандартам), что можно узнать из свойства document.compatMode, document.body.scrollLeft и document.body.scrollTop всегда будут равны нулю, а правильные значения можно получить через document.documentElement.scrollTop и document.documentElement.scrollLeft. Но все меняется наоборот если браузер находиться в режиме обратной совместимости (document.compatMode == «BackCompat»).

Ниже показано как узнать значения scrollTop и scrollLeft для тела документа:

* На заметку: методы scrollBy(numHorz, numVert) и scrollTo(numX, numY) так же позволяют прокуручивать содержимое объекта.

scrollBy(numHorz, numVert) — прокручивает на указанное смещение от текущего положения (numHorz, numVert могут принимать положительные, отрицательные значения, а так же 0 для того чтобы отсавить положение без изменения).

scrollTo(numX, numY) — прокручивает содержимое к определенной позиции.

Например: window.scrollBy(0,-10); //подняться вверх на 10 пикселей

В чем разница, различия между outerText и innerText, чем они отличаются?

Разберемся со свойствами на примере тэга SPAN (он выделен цветом), который заключен в тэге P:

Абзац изнутри:

outerText = .
innerText = .


Как видно, при чтении свойства outerText и innerText возвращают идентичные значения.

А теперь присвоим новые значения данным свойствам. Нажмите сначала на кнопку 1, и посмотрите, как изменится «Абзац изнутри», а затем кнопку 2.

Таким образом, пришли к тому, что:

Как убрать рамку вокруг ссылки (вокруг картинки ссылки) при клике?

При плике по ссылке ей передается фокус и она обрамляется рамочкой, но иногда это может портить внешний вид. Чтобы убрать рамочку, нужно убрать фокус с ссылки, вызывая метод blur . При клике по ссылке ей передается фокус и происходит событие onfocus в котором и нужно вызвать метод blur .

Однако помните, убирая таким образом фокус с элемента вы затрудняете передвижение по документы с помощью клавиши Tab .

Как узнать на сколько проскручена страница (проскролленность страницы)?

Как узнать ширину и высоту всей страницы вместе со скроллингом, а не только её видимой части?

Как узнать координаты центра окна с учетом скроллинга?

Как изменить размер окна после загрузки страницы?

Следует заметить, что изменение размеров окна может быть запрещено в настройках браузера.

Как развернуть окно во весь экран (максимизировать)?

Следует заметить, что перемещение и изменение размеров окна могут быть запрещены в настройках браузера. И не стоит злоупотреблять методами для перемещения и изменения размеров окна, пользователю это может мешать! Подходите с умом к их использованию.

Как открыть окно в полноэкранном режиме как при нажатии F11?

Для этого используем атрибут fullscreen при вызове window.open:

Работет только в IE. Gecko просто максимизирует окно.

Если вы не хотите «достать» пользователя, то не используйте это.

Как узнать положение элемента на странице (определение координат элемента)?

Функция возвращает объект со свойствами left, top, width, height, определяющими координаты элемента относительно верхнего угла страницы, а так же его размеры.

Не получается обратиться к свойствам другого фрейма (окна). Что делать?

Получить доступ к фрейму (окну) со страницей загруженной с чужого сайта (домена) невозможено по соображениям безопасности. Однако, в случае, когда странички лежат на разных поддоменах одного домена, например, a.site.com и b.site.com, и вы имеете доступ к страницам на этих поддоменах, то пропишите на страницах из обоих поддоменах следующее: document.domain=»site.com»; .

Задержка при выполнении скрипта javascript (javascript sleep delay)

Как приостановить выполнение скрипта или функции? Приостановить выполнение кода Javascript невозможно, но можно сделать эмуляцию используя метод setTimeout .

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

Как заполнить одну строку другой до определённой длины (аналог PHP ф-ии str_pad в Javascript)?

Добавим к стандартному объекту String свой метод String.pad() . Метод может принимать 3 параметра (но обязателен только первый): длина до которой нужно дополнить строку; строка заполнитель (по умолчанию пробел); тип заполнения (0 — заполнить слева, 1 — заполнить справа, 2 — заполнить с обеих сторон; по умолчанию берется 1).

Я хочу получить значение CSS свойства, но возвращается пустая строка. Например, хочу узнать цвет текста элемента и пишу document.getElementById(«elemId»).style.color, а результат пустая строка. Что делать?

Объект style элемента (document.getElementBy >только те значения, которые были заданны явно в атрибуте style в тэге элемента или были предварительно назначены через скрипт. Если Вы задаёте CSS свойства через тэг или внешние листы стилей, то они не будут присутствовать в объекте style элемента.

Возникает вопрос, как узнать вычисленное значение свойства элемента, если оно не задано в атрибуте style элемента и не было инициализировано через скрипт?

Воспользуйтесь функцией (работает начиная с NN 6, IE 5, Opera 7):

Функция принимает два аргумента: id элемента или сам элемент и название свойства в формате W3C/CSS или аналогичное название свойства в JavaScript нотации (в таком же виде в котором вы его указываете при доступе через объект style).

Как узнать координаты мыши (положение курсора мыши) относительно окна документа?

Поводите мышкой по коду функции ниже и смотрите при этом на строку состояния.

IE5+, Mozilla/Gecko, Opera 7+

Функция возвращает объект со свойствами x, y, определяющими координаты курсора.

Как узнать координаты мыши (положение курсора мыши) внутри абсолютно позиционированного элемента?

Функция возвращает объект со свойствами x, y, определяющими координаты курсора.

Функция getElementComputedStyle описывалась ранее

Как узнать значение группы input radio (input type radio value)?

Если не отмечен ни один элемент, функция вернет null .

Посимвольное отображение строки с задержками

Пример: «Вот такая печатная машинка!».delayingWrite(‘divID’,50);

Пример в работе

Обращение к родительскому окну из дочернего

Допустим есть основное окно которое открывает дочернее, используя window.open(). Для обращения к родительскому окну, в дочернем существует объект window.opener, который ссылается на объект window родителя. Рассмотрим пример (перезагрузить родительское окно из дочернего):

Округление до N знаков после запятой

Для округления в Javascript вещественного числа до N знаков после запятой воспользуемся методом toFixed объекта Number:

Метод toFixed возвращает число в виде строки с заданным числом цифр после запятой.

JavaScript: выделите выделение после использования textarea.setSelectionRange в Chrome

Функция javascript выбирает определенное слово в текстовой области, используя .setSelectionRange (). В Firefox текстовая область автоматически прокручивается вниз, чтобы показать выбранный текст. В Chrome (v14) это не так. Есть ли способ заставить Chrome прокручивать текстовую область до вновь выделенного текста? Решения jQuery приветствуются.

6 ответов

Вот простое и эффективное решение, чисто JS:

Поместите это в функцию, расширьте прототип объекта Element javascript, и все будет хорошо.

Не стесняйтесь спрашивать, если вам нужна дополнительная помощь.

Вы можете увидеть, как мы решили проблему в ProveIt (см. HighlightLengthAtIndex). По сути, дело в том, чтобы обрезать текстовую область, прокрутить до конца, а затем восстановить вторую часть текста. Мы также использовали плагин textSelection для согласованного поведения в разных браузерах.

Это код, вдохновленный ответом Мэтью Флашена.

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

Используйте это следующим образом

Я опубликовал ответ здесь:

Он прекрасно работает с одним необходимым правилом: установите высоту строки в CSS текстовой области!

Он вычисляет положение слова для прокрутки, просто выполняя простой математический расчет, и он отлично работает во всех моих экспериментах!

Не стесняйтесь спрашивать меня все, что вам нужно о коде!

Полный код для Chrome

Ответов много, но принятый не учитывает разрывы строк, Мэтью Флашен не добавил код решения, и в ответе naXa есть ошибка. Самый простой код решения:

Илон Маск рекомендует:  Работа с файлами в PHP
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL