Числовое поле инспектора

Контракт

Здесь легко получить поле, которое выглядит подписанным и не является им.

Отсюда следствие, которое проще нарушить, чем заметить: буква оси не должна быть единственным местом, где написано, какое это поле. Имя свойства живёт в inst-prop-label рядом и повторяется в aria-label каждого поля — три одинаковых квадратика с буквами X, Y, Z вне контекста строки не значат ничего.

aria-label обязан включать ось и свойство: «X» именем не является. Сама inst-num-axis подписью не размечена — иначе она перебила бы aria-label и стала бы полным именем поля.

Клавиатура нативная: стрелки меняют значение на step, PageUp и PageDown — на десять шагов. Степперы сняты оформлением, поведение не тронуто. Кольцо фокуса висит на обёртке через :focus-within, поэтому виден весь контрол, а не только цифры.

Рамка берёт --border-control и держит 3:1: здесь граница и есть контрол. В forced-colors обёртка получает рамку CanvasText — без неё поле схлопывается с поверхностью панели. Высота --control-h-sm даёт 26px, а в плотном режиме 22px, то есть ниже 24px по WCAG 2.5.8: это осознанная цена панели инспектора, где на экране десятки полей.

Состояния

<span class="inst-num-field">
  <span class="inst-num-axis">X</span>
  <input type="number" value="128" aria-label="Позиция X">
</span>
<span class="inst-num-field">
  <span class="inst-num-axis">Y</span>
  <input type="number" value="0" aria-label="Позиция Y" readonly>
</span>
<span class="inst-num-field">
  <span class="inst-num-axis">Z</span>
  <input type="number" value="-64" aria-label="Позиция Z" disabled>
</span>

Нативные стрелки-степперы сняты (appearance: textfield): в плотном ряду инспектора они съедали треть ширины поля и попадали под курсор чаще, чем сам ввод. Клавиатурные стрелки при этом продолжают работать — снято оформление, а не поведение.

JS

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

<script type="module" src="instrument.js"></script>

Что делает instrument.js

Пример в шапке живой: потяните букву оси влево-вправо, с Shift — в десять раз быстрее.

Перетаскивание буквы оси меняет значение. Курсор ew-resize на ней — обещание, данное картинкой, и instrument.js его выполняет.

Границы берутся из min и max, шаг — из step. Поле с disabled или readonly не тянется.

События

Своих событий нет: instrument.js меняет <input> и шлёт нативные input во время перетаскивания и change по отпусканию. Фреймворк видит их без единой строки клея.

input.addEventListener('change', (e) => scene.setX(+e.target.value));

Опции

<span class="inst-num-field">
  <span class="inst-num-axis">X</span>
  <input type="number" value="0.5" step="0.01" min="0" max="1"
         aria-label="Прозрачность X">
</span>

Композиции

Вектор

<span class="inst-vec">
  <span class="inst-num-field"><span class="inst-num-axis">X</span><input type="number" value="128" aria-label="Позиция X"></span>
  <span class="inst-num-field"><span class="inst-num-axis">Y</span><input type="number" value="0" aria-label="Позиция Y"></span>
  <span class="inst-num-field"><span class="inst-num-axis">Z</span><input type="number" value="-64" aria-label="Позиция Z"></span>
</span>

inst-vec раздаёт трём полям равные доли ширины, поэтому вектор не перекашивается, когда в одну компоненту вводят шестизначное число.

Одиночное значение с осью-именем

<span class="inst-num-field">
  <span class="inst-num-axis">R</span>
  <input type="number" value="45" step="5" aria-label="Радиус влияния">
</span>

Сценарии

Строка свойства инспектора

<div class="inst-prop">
  <span class="inst-prop-label" title="Позиция">Позиция</span>
  <span class="inst-prop-control inst-vec">
    <span class="inst-num-field"><span class="inst-num-axis">X</span><input type="number" value="128" aria-label="Позиция X"></span>
    <span class="inst-num-field"><span class="inst-num-axis">Y</span><input type="number" value="0" aria-label="Позиция Y"></span>
    <span class="inst-num-field"><span class="inst-num-axis">Z</span><input type="number" value="-64" aria-label="Позиция Z"></span>
  </span>
</div>

API

Связанное

Текстовое полеСлайдерСелект