Ввод
Вставки
Ряд подстановок для поля рядом: переменные шаблона, ключи события, поля записи. Нажатие кладёт значение на место каретки.
Разметка
<div class="inst-field" style="max-inline-size:30rem">
<label class="inst-label" for="ins-tpl">Шаблон уведомления</label>
<textarea class="inst-textarea inst-u-mono" id="ins-tpl" rows="3">Упал {{name}}
</textarea>
<div class="inst-inserts">
<button class="inst-insert" type="button" data-insert-into="#ins-tpl" title="Имя монитора">{{name}}</button>
<button class="inst-insert" type="button" data-insert-into="#ins-tpl" title="Адрес проверки">{{target}}</button>
<button class="inst-insert" type="button" data-insert-into="#ins-tpl" title="Состояние">{{status}}</button>
<button class="inst-insert" type="button" data-insert-into="#ins-tpl" title="Текст ошибки">{{error}}</button>
<button class="inst-insert" type="button" data-insert-into="#ins-tpl" title="Время события">{{time}}</button>
</div>
</div>
Пример живой: поставьте курсор в поле и нажмите подстановку — она встанет туда, где стоял курсор, а не в конец.
Контракт
| Что | Обязательно | Почему |
|---|---|---|
Настоящая <button type="button"> |
да | Это действие. <span> не получит фокус, не сработает по Enter и не назовётся кнопкой |
data-insert-into |
нет | Без него берётся поле того же inst-field. Указывать нужно, когда поле лежит в другом месте разметки |
| Все подстановки видны разом | да | Пара рядов читается взглядом. То, что не поместилось и требует поиска, — уже справочник формата, и ему место в документации, а не под полем |
Текст кнопки и есть значение — отдельная подпись не нужна. Пояснение кладётся в
title, но оно дополняет имя, а не заменяет его.
Ряд из десяти кнопок проходится табом, и это правильно: каждая делает своё. После вставки фокус возвращается в поле — оставленный на кнопке, он означает, что поле придётся искать руками.
Подпись держит 4.5:1 на утопленной поверхности во всех пяти темах.
Моноширинный тут не украшение: подстановка — идентификатор, а не слово, и
{{name}} от {{node}} отличается посимвольно.
Варианты
Вариантов нет. Подстановка тише действия: их бывает по десятку и больше на одно поле, и в полный голос палитра кричала бы громче того, ради чего страница открыта. Если подстановка важнее текста под ней — это не подстановка.
JS
Подключите модуль один раз на страницу.
<script type="module" src="instrument.js"></script>
Что делает instrument.js
Кладёт значение в поле на место каретки, а не в конец: курсор ставят туда, где нужна подстановка, и ждут её там. Выделенное заменяется. После вставки фокус возвращается в поле — иначе следующую букву некуда набрать.
Значение берётся из data-insert, а без него — из текста кнопки.
События
inst:insert всплывает с кнопки, detail — { text, field }. Отмена
оставляет поле нетронутым: приложению может понадобиться своя логика вставки,
например с проверкой позиции.
form.addEventListener('inst:insert', (e) => {
if (!allowed.has(e.detail.text)) e.preventDefault();
});
Само поле после вставки шлёт нативный input — рамки видят изменение без
единой строки клея.
Опции
| Атрибут | Что делает |
|---|---|
data-insert-into |
Селектор поля. Без него берётся первое textarea/input того же .inst-field |
data-insert |
Что вставить, если это не текст самой кнопки: короткая подпись, длинное значение |
API
| Имя | Что делает |
|---|---|
| класс | |
inst-inserts | Ряд подстановок |
inst-insert | Одна подстановка. Настоящая <button> |
| Имя | Значение | Что делает |
|---|---|---|
| атрибут | ||
data-insert-into | — | Селектор поля, куда класть значение. Без него берётся поле того же inst-field |
data-insert | — | Что вставить, если это не текст самой кнопки |
| событие | ||
inst:insert | — | Нажата вставка. detail — { text, field }. Отмена оставляет поле нетронутым |
| Имя | Значение | Откуда |
|---|---|---|
| токен | ||
--control-h-sm | 24px | база +14: плотность · масштаб |
--surface-sunken | light-dark(var(--n-2), var(--n-14)) | база +1: тема |
--border-subtle | light-dark(oklch(0 0 0 / 0.07), oklch(1 0 0 / 0.06)) | одно на все ячейки |
--font-mono | ui-monospace, " , " , " , Consolas, " , monospace | одно на все ячейки |
--text-xs | 0.78125rem | база +4: масштаб |
--space-2 | 4px | одно на все ячейки |
--space-3 | 6px | одно на все ячейки |
--radius-sm | 6px | база +4: масштаб |
Почему кит устроен именно так — конституция · Открытый код под MIT, github.com/keshon/instrument