You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Let's discuss various events that accompany data updates.
3
+
Давайте обсудим различные события, сопутствующие обновлению данных.
4
4
5
-
## Event: change
5
+
## Событие: change
6
6
7
-
The[change](http://www.w3.org/TR/html5/forms.html#event-input-change)event triggers when the element has finished changing.
7
+
Событие[change](http://www.w3.org/TR/html5/forms.html#event-input-change) срабатывает по окончании изменения элемента.
8
8
9
-
For text inputs that means that the event occurs when it loses focus.
9
+
Для текстовых инпутов это означает, что событие происходит при потере фокуса.
10
10
11
-
For instance, while we are typing in the text field below -- there's no event. But when we move the focus somewhere else, for instance, click on a button -- there will be a `change` event:
11
+
Например, пока мы печатаем в текстовом поле в примере ниже, события нет. Но когда мы перемещаем фокус, например, в другое место, нажмите на кнопку - произойдёт событие `change`:
12
12
13
13
```html autorun height=40 run
14
14
<inputtype="text"onchange="alert(this.value)">
15
15
<inputtype="button"value="Button">
16
16
```
17
17
18
-
For other elements: `select`, `input type=checkbox/radio`it triggers right after the selection changes.
18
+
Для других элементов: `select`, `input type=checkbox/radio`событие запускается сразу после изменения выбора.
19
19
20
-
## Event: input
20
+
## Событие: input
21
21
22
-
The`input`event triggers every time a value is modified.
22
+
Событие`input`срабатывает каждый раз при изменении значения.
If we want to handle every modification of an `<input>` then this event is the best choice.
35
+
Если мы хотим обрабатывать каждое изменение в `<input>`, то это событие является лучшим выбором.
36
36
37
-
Unlike keyboard events it works on any value change, even those that does not involve keyboard actions: pasting with a mouse or using speech recognition to dictate the text.
37
+
В отличие от клавиатурных событий, он работает при любых изменениях значений, даже если они не связаны с клавиатурными действиями: вставка с помощью мыши или распознавание речи для диктата текста.
The`input`event occurs after the value is modified.
39
+
```smart header="Нельзя ничего предотвратить в`oninput`"
40
+
Событие`input`происходит после изменения значения.
41
41
42
-
So we can't use `event.preventDefault()`there -- it's just too late, there would be no effect.
42
+
Поэтому мы не можем использовать `event.preventDefault()`там - будет уже слишком поздно, никакого эффекта не будет.
43
43
```
44
44
45
-
## Events: cut, copy, paste
45
+
## События: cut, copy, paste
46
46
47
-
These events occur on cutting/copying/pasting a value.
47
+
Эти события происходят при вырезании/копировании/вставке значения.
48
48
49
-
They belong to [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) class and provide access to the data that is copied/pasted.
49
+
Они относятся к классу [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) и обеспечивают доступ к копируемым/вставляемым данным.
50
50
51
-
We also can use `event.preventDefault()` to abort the action.
51
+
Мы также можем использовать `event.preventDefault()` для прерывания действия.
52
52
53
-
For instance, the code below prevents all such events and shows what we are trying to cut/copy/paste:
53
+
Например, код, приведённый ниже, предотвращает все подобные события и показывает, что мы пытаемся вырезать/копировать/вставить:
54
54
55
55
```html autorun height=40 run
56
56
<input type="text" id="input">
@@ -62,18 +62,18 @@ For instance, the code below prevents all such events and shows what we are tryi
62
62
</script>
63
63
```
64
64
65
-
Technically, we can copy/paste everything. For instance, we can copy a file in the OS file manager, and paste it.
65
+
Технически, мы можем скопировать/вставить всё. Например, мы можем скопировать файл в файловый менеджер ОС и вставить его.
66
66
67
-
There's a list of methods [in the specification](https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer)to work with different data types, read/write to the clipboard.
67
+
Существует список методов [в спецификации](https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer) для работы с различными типами данных, чтения/записи в буфер обмена.
68
68
69
-
But please note that clipboard is a "global" OS-level thing. Most browsers allow read/write access to the clipboard only in the scope of certain user actions for the safety. Also it is forbidden to create "custom" clipboard events in all browsers except Firefox.
69
+
Но обратите внимание, что буфер обмена - это "глобальный" уровень ОС. Большинство браузеров разрешают доступ на чтение/запись в буфер обмена только в рамках определённых действий пользователя для безопасности. Также запрещается создавать "пользовательские" события буфера обмена во всех браузерах, кроме Firefox.
70
70
71
-
## Summary
71
+
## Итого
72
72
73
-
Data change events:
73
+
События изменения данных:
74
74
75
-
|Event|Description|Specials|
75
+
|Событие|Описание|Особенности|
76
76
|---------|----------|-------------|
77
-
|`change`|A value was changed. |For text inputs triggers on focus loss. |
78
-
|`input`|For text inputs on every change. |Triggers immediately unlike`change`. |
79
-
|`cut/copy/paste`|Cut/copy/paste actions. |The action can be prevented. The`event.clipboardData`property gives read/write access to the clipboard. |
77
+
|`change`|Значение было изменено. |Для текстовых входов срабатывает при потере фокуса. |
78
+
|`input`|Для ввода текста при каждом изменении. |Запускается немедленно, в отличие от`change`. |
79
+
|`cut/copy/paste`|Действия по вырезанию/копированию/вставке. |Действие можно предотвратить. Свойство`event.clipboardData`предоставляет доступ на чтение/запись в буфер обмена.. |
0 commit comments