Skip to content

fix: correct events related terms in selection-range article.md ru #2133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
front42 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fix: correct events related terms in selection-range article.md ru #2133

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5f1c71e
fix: correct events related terms in selection-range article.md ru
front42 Mar 9, 2026
40daa54
feat: clarify handlers in selection-range article.md ru
front42 Mar 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions 2-ui/99-ui-misc/02-selection-range/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,10 +311,10 @@ From <input id="start" type="number" value=1> – To <input id="end" type="numbe

Существуют события, позволяющие отслеживать выделение:

- `elem.onselectstart` -- когда с elem начинается выделение, например пользователь начинает двигать мышкой с зажатой кнопкой.
- preventDefault() отменяет начало выделения.
- `document.onselectionchange` -- когда выделение изменено.
- Заметьте: этот обработчик можно поставить только на `document`.
- `selectstart` -- когда непосредственно на элементе (или внутри него) начинается выделение, например пользователь начинает двигать мышкой с зажатой кнопкой.
- Предотвращение действия по умолчанию в обработчике `elem.onselectstart` отменяет начало выделения. Таким образом, начать выделение с `elem` становится невозможно, но он по-прежнему может быть выделен. Посетителю просто нужно начать выделение с другого места.
- `selectionchange` -- когда выделение изменено.
- Заметьте: обработчик `onselectionchange` можно поставить только на `document`, он отслеживает все выделения в нём.

### Демо отслеживания выделения

Expand Down Expand Up @@ -424,15 +424,15 @@ From <input id="start" type="number" value=1> – To <input id="end" type="numbe

## Выделение в элементах форм

Элементы форм, такие как `input` и `textarea`, предоставляют [отдельное API для выделения](https://html.spec.whatwg.org/#textFieldSelection). Так как значения полей представляют собой простой текст, а не HTML, и нам не нужны такие сложные объекты, как `Range` и `Selection`.
Элементы форм, такие как `input` и `textarea`, предоставляют [отдельный API для выделения](https://html.spec.whatwg.org/#textFieldSelection). Так как значения полей представляют собой простой текст, а не HTML, и нам не нужны такие сложные объекты, как `Range` и `Selection`.

Свойства:
- `input.selectionStart` -- позиция начала выделения (это свойство можно изменять),
- `input.selectionEnd` -- позиция конца выделения (это свойство можно изменять),
- `input.selectionDirection` -- направление выделения, одно из: "forward" (вперёд), "backward" (назад) или "none" (без направления, если, к примеру, выделено с помощью двойного клика мыши).

События:
- `input.onselect` -- срабатывает, когда выделение завершено.
- `select` -- обработчик `input.onselect` срабатывает, когда выделение завершено.

Методы:

Expand All @@ -453,7 +453,7 @@ From <input id="start" type="number" value=1> – To <input id="end" type="numbe

### Пример: отслеживание выделения

К примеру, этот код использует событие `onselect`, чтобы отслеживать выделение:
К примеру, этот код использует событие `select`, чтобы отслеживать выделение:

```html run autorun
<textarea id="area" style="width:80%;height:60px">
Expand All @@ -471,8 +471,8 @@ From <input id="start" type="number" value=1> – To <input id="end" type="numbe
```

Заметьте:
- `onselect` срабатывает при выделении чего-либо, но не при снятии выделения.
- событие `document.onselectionchange` не должно срабатывать при выделении внутри элемента формы в соответствии со [спецификацией](https://w3c.github.io/selection-api/#dfn-selectionchange), так как оно не является выделением элементов в `document`. Хотя некоторые браузеры генерируют это событие, полагаться на это не стоит.
- обработчик `onselect` срабатывает при выделении чего-либо, но не при снятии выделения.
- `document.onselectionchange` не должен срабатывать при выделении внутри элемента формы в соответствии со [спецификацией](https://w3c.github.io/selection-api/#dfn-selectionchange), так как это не является выделением элементов в `document`. Хотя некоторые браузеры генерируют событие `selectionchange`, полагаться на это не стоит.


### Пример: изменение позиции курсора
Expand Down Expand Up @@ -586,7 +586,7 @@ button.onclick = () => {
После этого `elem` станет частью `document.getSelection()`, так что на самом деле выделение произойдёт, но его содержимое обычно игнорируется при копировании и вставке.


2. Предотвратить действие по умолчанию в событии `onselectstart` или `mousedown`.
2. Предотвратить действие по умолчанию в обработчиках событий `selectstart` или `mousedown`.

```html run
<div>Можно выделить <div id="elem">Нельзя выделить</div> Можно выделить</div>
Expand Down Expand Up @@ -618,7 +618,7 @@ button.onclick = () => {
1. Для документа: объекты `Selection` и `Range`.
2. Для `input`, `textarea`: дополнительные методы и свойства.

Второе API очень простое, так как работает с текстом.
Второй API очень простой, так как работает с текстом.

Самые используемые готовые решения:

Expand Down